Vue学习笔记_欠缺知识_动画效果-待解决问题：transition和animation区别_vue animation infinite linear ease-out-优快云博客

本文详细介绍了如何在Vue中利用HTML的appear属性和CSS的@keyframes规则创建动画，包括transform的各种变换属性及其应用，以及如何通过animation属性控制动画的执行方式和时机。重点讲解了v-enter等生命周期钩子类名的使用。

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