vue中的动画

学习目标：

vue中的动画

---

学习内容：

1、 使用过度类名实现动画
2、 自定义v-前缀
3、 使用第三方animate
4、 使用钩子函数实现半场动画
5、使用transition-group实现列表动画
6、appear和tag的使用

---

学习产出：

1.使用过度类名实现动画

• v-enter
• v-enter-active
• v-enter-to
• v-leave
• v-leave-active
• v-leave-to

使用transition包裹控制元素

<transition>
            <h3 v-if="flag">出现</h3>
        </transition>

在样式里书写动画形式

 <style>
        .v-enter,.v-leave-to{
    
            opacity: 0;
            transform: translateX(100px);
        }
        .v-enter-active,.v-leave-active{
    
            transition:all 1s ease;
        }
    </style>

2.自定义v-前缀

在transition元素里书写属性name=“名字”

<transition name="my">
            <h1 v-if="flag">h1</h1>
        </transition>

把v-样式改成指定前缀