vue+animation实现翻页动画


Posted in Javascript onJune 29, 2020

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

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

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

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

Javascript 相关文章推荐
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
Angular2安装angular-cli
May 21 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 #Javascript
vue实现匀速轮播效果
Jun 29 #Javascript
vant实现购物车功能
Jun 29 #Javascript
js实现随机点名器精简版
Jun 29 #Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python切片索引用法示例
2018/05/15 Python
Python中拆分字符串的操作方法
2019/07/23 Python
详解django中Template语言
2020/02/22 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
智能钱包:Ekster
2019/11/21 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
网络安全方面的面试题
2016/01/07 面试题
高三生物教学反思
2014/01/25 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
表扬信范文
2015/05/04 职场文书
班级联欢会主持词
2015/07/03 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python if else条件语句形式详解
2022/03/24 Python