微信小程序动画实现：transition与animation对比-优快云博客

小程序动画两种实现方式

利用transition和animation两种方式实现相同的淡入淡出效果

利用transition和animation两种方式实现相同的淡入淡出效果

主要是实现点击展示按钮，按钮消失，菜单有底部缓缓滑入界面；点击菜单中关闭按钮，展示按钮显示，菜单缓缓从底部收回。

废话不多说，直接先上效果图，看效果。

transition实现的动画效果

动画实现之transition方式

animation实现的相同的动画效果（不同之处，在菜单中加入了内容，同样transition中也可以加入内容）

transition动画实现效果具体内容

transition动画实现效果的WXML

<!-- transition 动画 -->
<button
	type="primary"
	hidden='{{extraClasses}}'
	bindtap="toggleTransition"
	class="show">
		展示
</button>
<view class="section {{extraClasses}}" bindtap="toggleTransition">
  <button class="close" catchtap="transitionClose">
    <icon type="clear"></icon>
  </button>
</view>

transition动画实现效果的WXSS

.show {
  position: relative;
  z-index: 9;
}
.section {
  width: 100%;
  height: 1334rpx;
  color:#000;
  position: relative;
  z-index: 10;
  background: rgb(112, 120, 235);
  opacity: 0.4;
  transform: translateY(1288px);
  transition: 2s ease;
}
.move {
  transform: translateY(0)
}
.close {
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 50%;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

transition动画实现效果的JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    "extraClasses": ""
  },
  toggleTransition: function(){
    let that = this
    if(that.data.extraClasses == ""){
      that.setData({"extraClasses": "move"})
    }else {
      that.setData({ "extraClasses": "" })
    }
  },
  transitionClose: function(){
  	let that = this
    that.setData({ "extraClasses": "" })
  }
})

transition实现动画效果主要是css过渡效果，加上js控制类名来实现动画变化。

animation动画实现效果具体内容

animation动画实现效果的WXML

<!-- animation动画 -->
<button
	type="primary"
	hidden='{{toggle}}'
	bindtap="toggleAnimation"
	class="show">
		展示
</button>
<view 
	class="section" 
	animation="{{ani}}" 
	bindtap="toggleAnimation">
  <button class="close" catchtap="animationClose">
    <icon type="clear"></icon>
  </button>
  <view class='time-title'>选择时间</view>
  <view class='time-choose-block'>
    <date-choose bindchooseevent='chooseDate' />
  </view>
</view>

animation动画实现效果的WXSS

.show {
  position: relative;
  z-index: 9;
}
.section {
  width: 100%;
  height: 1334rpx;
  color:#000;
  position: relative;
  z-index: 10;
  background: rgb(112, 120, 235);
  opacity: 0.4;
  transform: translateY(1288px);
  transition: 2s ease;
}
.move {
  transform: translateY(0)
}
.close {
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 50%;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}
.time-choose-block{
  position: absolute;
  top: 120rpx;
  left: 30rpx;
  float: left;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #000;
}
.time-title{
  position: absolute;
  top: 50rpx;
  left: 20rpx;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 80px;
  color: rgb(102, 255, 0);
  text-align: center;
}

animation动画实现效果的JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    "toggle": false
  },
  toggleAnimation: function(){
    let that = this
    let animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease-out',
      delay: 200
    })
    animation.translateY(0).step()
    that.setData({
      ani: animation.export(),
      "toggle": true
    })
  },
  animationClose: function(){
    let that = this
    let animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease-out',
      delay: 200
    })
    animation.translateY(1288).step()
    that.setData({
      ani: animation.export(),
      "toggle": false
    })
  }
})