Vue3中如何实现数字翻牌效果?
一、需求
监听数据的变化，实现数字翻牌效果
本人OS:本想截一个gif，但是一直没找到合适的截gif工具......有好用的截gif工具，跪求戳戳我~
二、思路
1.设置初始数组：[0]
2. 把获取到的新数据整个数字用逗号隔开，组成一个新的数组
3.数组中的每一个数字都是在0~9之间移动展示，数字位移的通用公式：
transform: translate(-50%,-${number * 10}%)4.监听数据的变化，当数据变化时，获取每个数字对应的ref，添加位移样式即可，移动的时间可以自行调整
三、完整代码
数字翻牌器
0123456789
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！