微信小程序实现走马灯效果实例

在网页web前端很常见，今天就介绍下小程序的实现方式，一种是用的css样式实现，另一种是运用小程序的动画功能实现。@keyframes 实现利用@keyframes的规则来实现，非常方便，只需要css样式就可以满足，使用方法跟web上一样。样式类，from to 来定义动画的开始结束，这里是从屏幕最右端向左滑，触及到最左侧后重新开始新一轮动画。在页面首次渲染完毕onReady时执行，查询到对应文字节点信息的对象，得到文字的长度。在一组动画完成之后，调用bindtransitionend回调，再一次去执行动画，在第一次动画结束之后，重新开始，通过animationend监听动画结束，然后再次执行。这个动画在小程序开发工具上运行会有动画突然暂停的现象，可以用手机试下的。