动画

动画

1.定义

对元素进行添加,修改或者删除等操作时,需要使用动画

2.使用

系统提供了6个内置的类名
.v-enter   进入之前
.v-enter-active  进入过程
.v-enter-to 进入结束
.v-leave  离开之前
.v-leave-active  离开过程
.v-leave-to  离开结束

需要结合标签transition来使用,如果没有设置name属性,默认.v-  如果设置了name属性,使用类名: .name属性值-

3.使用animate.css实现动画

官网:https://animate.style/

3-1.下载

npm init 初始化
npm i animate.css --save

3-2.引入animate.css

<!-- 引入animate.css -->
    <link rel="stylesheet" href="./node_modules/animate.css/animate.css">

3-3.使用

 <transition enter-active-class="animate__animated animate__bounceInDown"
            leave-active-class="animate__animated animate__bounceOutRight"
        >
            <div class="box" v-if="isShow"></div>
 </transition>

3-4注意

在transition标签中,使用animate.css动画.需要使用系统提供的类名:
	1.enter-active-class
	2.leave-active-class