快捷導航

vue+animation實現(xiàn)翻頁動畫

更新時間：2020年06月29日 17:18:35 作者：沫熙瑾年

這篇文章主要為大家詳細介紹了vue+animation實現(xiàn)翻頁動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+animation實現(xiàn)翻頁動畫展示的具體代碼，供大家參考，具體內(nèi)容如下

前端在做數(shù)據(jù)展示的時候，可能提留頁面時間較長，導致數(shù)據(jù)不能及時更新，你可以定時更新，也可以做一個假數(shù)據(jù) 給用戶視覺上的體驗，接下來就是第二種，假數(shù)據(jù)，它用了C3 animation 實現(xiàn)了一個翻頁動畫。

第一種是單獨運動

<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循環(huán)一邊

<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>

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: