vue+animation实现翻页动画
(编辑：jimmy 日期: 2024/11/2 浏览：2)
本文实例为大家分享了vue+animation实现翻页动画展示的具体代码，供大家参考，具体内容如下
前端在做数据展示的时候，可能提留页面时间较长，导致数据不能及时更新，你可以定时更新，也可以做一个假数据 给用户视觉上的体验，接下来就是第二种，假数据，它用了C3 animation 实现了一个翻页动画。
第一种是单独运动
<template>
<div>
<div>
<ul>
<li v-for="(item,i) in NumberList" :key="i" ><a :class="[item.isMove ">{{item.num}}</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return {
NumberList:'',
Number:108847,
}
},
mounted(){
let arr = String(this.Number).split('')
this.NumberList=[]
arr.forEach(item => {
const model = {};
model.isMove = false;
model.num = item;
this.NumberList.push(model);
});
setInterval(() =>{
this.Number=this.Number+1;
let data = String(this.Number);
let arr = data.split("");
arr.forEach((item, index) => {
if (item !== this.NumberList[index].num) {
this.NumberList[index].isMove = true
}
});
}, 10000)
},
watch: {
Number() {
setTimeout(() =>{
let data = String(this.Number);
let arr = data.split("");
this.NumberList.forEach((item, index) => {
this.NumberList[index].num = arr[index];
});
}, 500);
setTimeout(() =>{
this.NumberList.forEach((item, index) => {
this.NumberList[index].isMove = false
});
}, 1000);
}
},
methods:{
}
}
</script>
<style lang="" scoped>
h1{
text-align:center;
}
ul{
display: flex;
}
li{
list-style: none;
width:50px;height:80px;
background: red;
margin-right: 10px;
text-align: center;
line-height: 80px;
font-size:20px;
color:#ffffff;
position: relative;
}
a {
position: absolute;
top: 3px;
color: #ffffff;
}
.move-an {
animation:mymove 1s infinite linear;
-webkit-animation:mymove 1s infinite linear;
}
@keyframes mymove {
0% {top: 3px;}
25% {top: -40px;}
48% {top: -80px;}
49% {top: -80px; opacity: 0}
50% {top: 80px;}
51% {top: 80px;opacity: 1; }
100% {top: 3px;}
}
</style>
第二种是整体运动 0-9循环一边
<template>
<div class="main">
<div v-for="(item,i) in NumberList" class="move-num" :key="i">
<div>
<div style="visibility:hidden;position: static">
<span v-for="(list, i) in item.num" :key="i" class="num-move">{{list}}</span>
</div>
<a :class="[isMove === true ">
<span v-for="(list, i) in item.num" :key="i" class="num-move">{{list}}</span>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
isMove:false,
NumberList:[],
Number:108847,
numModels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
mounted(){
this.handdleDate()
setInterval(() => {
this.handdleDate()
}, 10000)
},
methods:{
handdleDate(){
let arr = String(this.Number).split('')
this.NumberList=[]
arr.forEach(item => {
const model = {}
const baseArr = JSON.parse(JSON.stringify(this.numModels))
model.isMove = false;
for (let i = 0; i < parseInt(item) + 1; i++) {
baseArr.push(i)
}
model.num = baseArr;
this.NumberList.push(model);
this.isMove = true;
setTimeout(() => {
this.isMove = false
}, 3000)
});
}
}
}
</script>
<style lang="" scoped>
.main{
display: flex;
}
.move-num{
width:30px;height:40px;
background:red;
overflow: hidden;
margin-right:10px;
line-height: 40px;
color:#fff;
position: relative;
overflow: hidden;
}
.move-num div {
position: absolute;
width: 100%;
height: auto;
}
.move-num div a {
color: #ffffff;
display: block;
position: absolute;
left: 10px;
bottom: calc(100% - 45px);
}
.num-move {
width: 100%;
display: block;
margin: 3px 0;
}
.move-an {
animation:mymove 3s infinite linear forwards;
-webkit-animation:mymove 3s infinite linear forwards;
}
.num-move {
width: 100%;
display: block;
margin: 3px 0;
}
@keyframes mymove {
0% {bottom: 3px;}
100% {bottom: calc(100% - 40px)}
}
</style>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：iview实现图片上传功能