vue怎么实现翻牌动画(vue,开发技术)

应用场景

常用于大屏订单数量展示

原理

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

• 利用css transform 使数字滚动

实现思路

• 根据css先让数字垂直排列，总共设置8列

• 根据组件传递的数值，如果不满8位，递归补零

• 补零之后，循环根据 translate(-50%, -${numberArr[index] * 10}%，查看动画

<template><divclass="chartNum"><divclass="box-item"><li:class="{'number-item':!isNaN(item),'mark-item':!isNaN(item)}"v-for="(item,index)inorderNum":key="index"><spanv-if="!isNaN(item)"><iref="numberItem">0123456789</i></span><spanclass="comma"v-else>{{item}}</span></li></div></div></template><script>exportdefault{name:"hChartNum",props:{num:{type:Number,default:1123}},data(){return{orderNum:['0','0','0','0','0','0','0','0'],//默认订单总数}},mounted(){setTimeout(()=>{this.toOrderNum(this.num)//这里输入数字即可调用},500);},methods:{//设置文字滚动setNumberTransform(){constnumberItems=this.$refs.numberItem//拿到数字的ref，计算元素数量constnumberArr=this.orderNum.filter(item=>!isNaN(item))//结合css，让文字滚动起来for(letindex=0;index<numberItems.length;index++){constelem=numberItems[index];elem.style.transform=`translate(-50%,-${numberArr[index]*10}%)`}},//处理订单数字toOrderNum(num){num=num.toString();if(num.length<8){num='0'+num;//未满8位，补零this.toOrderNum(num);//递归添加"0"补位}elseif(num.length==8){this.orderNum=num.split('')}else{//数据量超过8位this.$message.error('数据量过大');}this.setNumberTransform();}}}</script><stylescopedlang="less">.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-repeatcentercenter;background-size:100%100%;list-style:none;margin-right:5px;border-radius:4px;border:1pxsolidrgba(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:transform1sease-in-out;letter-spacing:10px;}}}.number-item:last-child{margin-right:0;}</style>