vue实现翻牌动画

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

应用场景 常用于大屏订单数量展示
原理

  • 利用css writing-mode: vertical-rl 使数字垂直排列
  • 利用css transform 使数字滚动
实现思路
  • 根据css先让数字垂直排列,总共设置8列
  • 根据组件传递的数值,如果不满8位,递归补零
  • 补零之后,循环根据 translate(-50%, -${numberArr[index] * 10}%,查看动画
.box-item{position: relative; height: 100px; font-size: 54px; line-height: 41px; text-align: center; list-style: none; color: #2D7CFF; writing-mode: vertical-lr; text-orientation: upright; -moz-user-select: none; -webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none; }/*默认逗号设置*/.number-item{width: 10px; height: 100px; margin-right: 5px; line-height: 10px; font-size: 48px; position: relative; & > span{position: absolute; width: 100%; bottom: 0; writing-mode: vertical-rl; text-orientation: upright; }}/*滚动数字设置*/.number-item {width: 41px; height: 75px; background: url(./img/bg.jpg) no-repeat center center; background-size: 100% 100%; list-style: none; margin-right: 5px; border-radius:4px; border:1px solid rgba(221,221,221,1); & > span{position: relative; display: inline-block; margin-right: 10px; width: 100%; height: 100%; writing-mode: vertical-rl; text-orientation: upright; overflow: hidden; & > i {font-style: normal; position: absolute; top:11px; left: 50%; transform: translate(-50%,0); transition: transform 1s ease-in-out; letter-spacing: 10px; }}}.number-item:last-child {margin-right: 0; }

【vue实现翻牌动画】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读