What?
如何实现Vue的动画效果
How?
1.html:标签,定义name属性,appear属性(初始化动画)
2.css:@keyframes+name值,有两个子类
–@keyframes动画是循环的,而transform 只执行一遍.
–@keyframes是个动画,理解成多个transform组成的一个组。
@keyframes atguigu {
from/0%{
transform: translateX(-100%);/*从左边来 */
}
to/100%{
transform: translateX(0px);/*来到 */
}
}
3.变换的属性:transform
–旋转rotate(45deg)顺时针方向,deg角度值
–缩放scale(0.5,2) 水平方向缩小一半,垂直方向放大一倍
–倾斜skew(xxdeg) 默认水平+垂直
–移动translate,两个参数
–变形–>同理都可以:rotateX,scaleX,skewX,translateX
4.调用方法:animation:动画名 时间 速度 开始延迟 执行次数 是否反向
–keyframes绑定的值
–自然数n
–linear匀速,ease慢加慢,ease-in慢开,ease-out尾,ease-in-out慢开慢
ease: 慢开,快,慢尾
ease-in: 慢开,匀速
ease-out: 匀速,慢尾
ease-in-out: 慢开,匀速,慢尾
--自然数n
--自然数n, infinite无限次数
--reverse
5.使用方法:
类名-方法,无类名默认用v
v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to