事件名 | 含义 |
---|---|
transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |
animationstart | CSS 动画开始 |
animationiteration | CSS 动画结束一个阶段 |
animationend | CSS 动画结束 |
<view class="box {{extraClasses}}" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIteration"> </view> <button class="btn" bindtap="triggerTransition">触发 CSS 渐变</button> <button class="btn" bindtap="triggerAnimation">触发 CSS 动画</button>
说明:
.box { width: 100rpx; height: 100rpx; margin: 60rpx; background: red; } .btn { margin: 30rpx 60rpx 0; } .box-transition { transition: all 0.5s; } .box-moved { margin-left: 590rpx; } @keyframes box-ani { from {margin-left: 60rpx} to {margin-left: 590rpx} } .box-animation { animation: box-ani 1s alternate infinite; }
const app = getApp() Page({ data: { extraClasses: '', }, triggerTransition: function () { if (this.data.extraClasses == 'box-transition box-moved') { this.setData({ extraClasses: 'box-transition' }) } else { this.setData({ extraClasses: 'box-transition box-moved' }) } }, triggerAnimation: function () { this.setData({ extraClasses: 'box-animation' }) }, transitionEnd: function () { console.log('渐变已结束') }, animationStart: function () { console.log('动画已开始') }, animationIteration: function () { console.log('动画进行中') }, })