智能微信小程序开发_vue+animation完成翻页动画

vue+animation实现翻页动画       这篇文章主要为大家详细介绍了vue+animation实现翻页动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

第一种是单独运动

 template 
 div 
 div 
 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 
 text-align:center;
 display: flex;
 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;
 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 
 div v-for="(item,i) in NumberList" :key="i" 
 div 
 div 
 span v-for="(list, i) in item.num" :key="i" {{list}} /span 
 /div 
 a :class="[isMove === true 'move-an' : '']" 
 span v-for="(list, i) in item.num" :key="i" {{list}} /span 
 /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组件的教程,请大家点击专题进行学习。

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ganhuo/3205.html