【该问题已解决】

Question

如题，看官网时有个小栗子，试了个animationend并没有触发，为什么
index.js

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('动画进行中')
  },
  animationEnd:function(){
    console.log('动画结束')
  }
})

index.wxml

<view class="box {{extraClasses}}"
  bindtransitionend="transitionEnd"
  bindanimationstart="animationStart"
  bindanimationiteration="animationIteration"
  bindanimationend="animationEnd"
></view>

<button class="btn" bindtap="triggerTransition">触发 CSS 渐变</button>
<button class="btn" bindtap="triggerAnimation">触发 CSS 动画</button>

Answer 1

因为

infinite！！！
@keyframes box-ani {
  from {margin-left: 60rpx}
  to {margin-left: 590rpx}
}
.box-animation {
  animation: box-ani 1s alternate infinite;
}