vue遍历一组动画

动画初始化渲染

最近在开发移动端小程序应用时, 可能会涉及动画的循环播放功能, 就需要计算一组动画每一项的位移的运动轨迹, 如果配合 css3 进行动画渲染相对来说比用 js 操作 dom 渲染性能更好一点, 虽然我们常常会忘了初始化涉及到动画的重绘, 所以初始化动画渲染数据时可以先对元素设置style为 display: none 可以防止数据没填充进来动画先加载闪烁现象, 等动画的数据完全加载填充到元素上再 display: block 即可.

数据计算处理方式

但是当数据加载的时候, 会涉及到计算的位移, 但是最开始我是直接对元素直接遍历数组, 然后对每一个遍历的元素style样式偏移left和top进行计算处理 随机数 * 初始索引. 这样做会使代码变得非常冗余, 所以一般计算值都存到数组对象里面. 也就是从接口 response 获取返回数据时, 新建一个对象存放获得对象的计算值, 最好不要在响应返回数据的对象上给对象属性赋计算值, 当我们遍历对象用到 map 和 foreach 方法遍历数组的每一项时, 这时可以用到Math.random()随机数来对每一个项进行计算然后保存在数组里.

框架的动画渲染

如果使用 vue 库遍历的动画, 初始化动画具有过渡效果时, 可以在遍历动画时嵌套一层 <transition name="fade" :key="index"> </transition> 有助于动画在恰当时机执行渲染.