vue跳转动画,vue页面切换动画
这篇文章主要为大家详细介绍了某视频剪辑软件实现翻牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现翻牌动画的具体代码，供大家参考，具体内容如下
应用场景
常用于大屏订单数量展示
原理
利用钢性铸铁书写模式：垂直-rl使数字垂直排列利用钢性铸铁转换使数字滚动
实现思路
根据钢性铸铁先让数字垂直排列，总共设置8列根据组件传递的数值，如果不满8位，递归补零补零之后，循环根据translate(-50%, -${numberArr[index] * 10}%,查看动画模板
div class=chartNum
div class=box-item
里
:class={number-item :伊斯南(项)， mark-item :isNaN(item)}
v-for=(item，index) in orderNum
:key=index
span v-if=！ isNaN(item)
i ref=numberItem0123456789/i
/span
span class= comma v-else { { item } }/span
/李
/div
/div
/模板
脚本
导出默认值{
名称： hChartNum ，
道具：{
数量：{
类型：数量，
默认值：1123
}
},
data() {
返回{
orderNum: [0 ， 0 ， 0 ， 0]，//默认订单总数
}
},
已安装(){
setTimeout(()={
this.toOrderNum(this.num) //这里输入数字即可调用
}, 500);
},
方法：{
//设置文字滚动
setNumberTransform(){
const numberItems=this .$refs.numberItem //拿到数字的裁判，计算元素数量
常数arr=this。订单编号。筛选器(item=！伊斯南（项目))
//结合css，让文字滚动起来
对于(设索引=0;索引号项目。长度；索引){
const elem=项目数[index]；
elem。风格。transform=` translate(-50%，-$ { number arr[index]* 10 } %)` 1
}
},
//处理订单数字
toOrderNum(num){
数字=数字。tostring()；
如果（数量长度8){
num=" 0 " num//未满8位，补零
这个。toordernum(num)；//递归添加0补位
}
else if(num.length==8){
this.orderNum=num.split( )
}
否则{
//数据量超过8位
这个message.error(数据量过大);
}
这个。设置数字转换()；
}
}
}
/脚本
样式范围语言=少。盒子-项目{
位置：相对；
高度：100像素
字体大小：54px
行高：41px
文本对齐：居中；
列表样式：无；
颜色：# 2d 7 CFF；
书写模式：垂直-lr；
文本方向：直立；
-moz-用户-选择：无；
-网络工具包-用户选择：无；/*webkit浏览器*/
-ms-用户-选择：无；/*IE10*/
-khtml-用户选择：无；/*早期浏览器*/
用户选择：无；
}
/*默认逗号设置*/。编号-项目{
宽度：10px
高度：100像素
右边距：5px
行高：10px
字体大小：48px
位置：相对；
跨度{
位置：绝对；
宽度：100%;
底部：0;
书写模式：垂直-rl；
文本方向：直立；
}
}
/*滚动数字设置*/。编号-项目{
宽度：41px
身高：75像素
背景：网址(。/img/bg.jpg)不重复居中居中；
背景尺寸：100% 100%;
列表样式：无；
右边距：5px
边框-半径：4px
边框：1px固体rgba(221，221，221，1)；
跨度{
位置：相对；
显示：内嵌-块；
右边距：10px
宽度：100%;
身高：100%;
书写模式：垂直-rl；
文本方向：直立；
溢出：隐藏；
我{
字体样式：正常；
位置：绝对；
top:11px；
左：50%;
transform: translate(-50%，0)；
转场：变换1s淡入淡出；
字母间距：10px
}
}
}。编号-项目：最后一个孩子{
右边距：0；
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。