小程序Animation实现圆圈放大后回到原位

最新推荐文章于 2024-07-13 23:36:07 发布

原创最新推荐文章于 2024-07-13 23:36:07 发布 · 538 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css #前端

小程序同时被 2 个专栏收录

59 篇文章

订阅专栏

小程序动画

1 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript创建一个点击按钮后实现一次动态放大效果的简单实例，包括代码实现和关键步骤。

点击按钮实现一次放大。

效果如下：

上代码！

 <view class="red_css" animation="{{move}}" bindtransitionend="transitionEnd"></view>

.red_css {
  position: absolute;
  bottom: 120rpx;
  height: 110rpx;
  width: 110rpx;
  border: 1rpx solid #ea4c4c;
  border-radius: 50%;
  z-index: 9999;
  margin-left: 150rpx;
}

     data = {
 move: {},
}

 methods = {
 move1() {
      this.move = wx.createAnimation({ duration: 800 })
      this.$apply()
      this.move
        .opacity(0)
        .scale(3, 3)
        .step()
      this.move = this.move.export()
      this.$apply()
    },
    transitionEnd() {
      // 复位操作
      this.move = wx.createAnimation({ duration: 0 })
      this.move.opacity('').step()
      this.move = this.move.export()
    },
}