vue+animation实现翻页动画

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

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

第一种是单独运动

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

第二种是整体运动 0-9循环一边

.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)}
}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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