vue+animation实现翻页动画

Stella ·

更新时间:2024-11-10

· 787 次阅读

本文实例为大家分享了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 动画

1024 个赞