vue实现翻牌动画

本文实例为大家分享了vue实现翻牌动画的具体代码，供大家参考，具体内容如下

应用场景

常用于大屏订单数量展示

原理

• 利用css writing-mode: vertical-rl 使数字垂直排列
• 利用css transform 使数字滚动

实现思路

• 根据css先让数字垂直排列，总共设置8列
• 根据组件传递的数值，如果不满8位，递归补零
• 补零之后，循环根据 translate(-50%, -${numberArr[index] * 10}%，查看动画

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。