在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

目录

1.先准备样式和定义动画或过渡

2.使用包裹要过度的元素，并配置name属性：

3.多个元素过渡，指定key值

使用第三方库animate.css

1.先准备样式和定义动画或过渡

元素进入的样式：

v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点

元素离开的样式：

v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点

动画

/* 动画进入类名 */

.hello-enter-active{

/* linear 匀速 */

animation: amt1 0.5s linear;

}

/* 动画退出类名 */

.hello-leave-active{

animation: amt1 0.5s linear reverse;

}

/* 定义动画 */

@keyframes amt1 {

from{

transform: translateX(-100%);

}

to{

transform: translateX(0px);

}

}

过渡

/* 进入的起点、离开的终点 */

.hello-enter,.hello-leave-to{

transform: translateX(-100%);

}

/* 进入的过程 */

.hello-enter-active,.hello-leave-active{

transition: 0.5s linear;

}

/* 进入的终点、离开的起点 */

.hello-enter-to,.hello-leave{

transform: translateX(0);

}

2.使用包裹要过度的元素，并配置name属性：

你好啊！

3.多个元素过渡，指定key值

若有多个元素需要过度，则需要使用：，且每个元素都要指定key值

你好啊！

迪丽热巴！

使用第三方库animate.css

Animate.css | A cross-browser library of CSS animations.

导入直接用类名

相关阅读