.fold-left-enter-active { animation-name: fold-left-in; animation-duration: .3s; } .fold-left-leave-active { animation-name: fold-left-out; animation-duration: .3s; } .fold-right-enter-active { animation-name: fold-right-in; animation-duration: .3s; } .fold-right-leave-active { animation-name: fold-right-out; animation-duration: .3s; }
animation 属性是一个简写属性，用于设置六个动画属性：
值
描述
animation-name
规定需要绑定到选择器的 keyframe 名称。
animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画开始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。
animation-direction
规定是否应该轮流反向播放动画。
@keyframes fold-left-in { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes fold-left-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
根据CSS3 @keyframes规则，创建动画。创建动画的原理即将一套CSS样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套CSS样式。可以“百分比”来规定改变发生的时间，或者通过关键词“from”和“to”，等价于“0%”(动画的开始时间)和“100%”(动画的结束时间)。一般为了获得最佳的浏览器支持，应该始终定义0%和100%选择器。
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。translate3d(x,y,z)定义3D转换，如transform：translate3d(100%, 0, 0)只改变了x的值，即代表横向左滑动，同理可相应推出其他情况。
总结
以上就是vue页面跳转动画效果功能实现的6个步骤，即这个功能中所含括的6个大知识点，当然其中还包括许多扩展的知识点，学无止境，需慢慢深入挖掘…
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: