微信小程序wxss支持Css的keyframes动画,我们想通过事件监听,在动画开始、动画播放阶段、动画播放结束的时候进行下一步动作。如下图,有一个从右飘入,然后从左侧出去的动画,我们希望的是,前一个出去后,后一个再进入,即上一个播放完成后,再出来下一个
这个时候,解决问题的关键问题在于,监听上一个动画播放完成,这个时候,我们需要用到微信小程序的动画播放完成后的事件,
为此,我们将流程逻辑描述如下:
数据格式:
flbox:{itemlist:[],playing:false};//我们有一个这样的数据格式,其中itemlist用来存放要播放的队列,其中每一项item:{}可以为任意自己想要的,但里面必须要有一个st_start:true/false,用来控制,是否开始播放动画。