vue+animation实现翻页动画

本文实例为大家分享了vue+animation实现翻页动画展示的具体代码,供大家参考,具体内容如下

前端在做数据展示的时候,可能提留页面时间较长,导致数据不能及时更新,你可以定时更新,也可以做一个假数据 给用户视觉上的体验,接下来就是第二种,假数据,它用了C3 animation 实现了一个翻页动画。

第一种是单独运动

<template>

<div>

<div>

<ul>

<li v-for="(item,i) in NumberList" :key="i" ><a :class="[item.isMove ? 'move-an' : '']">{{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 ? 'move-an' : '']">

<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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue+animation实现翻页动画 的全部内容, 来源链接: utcz.com/p/237428.html

回到顶部