transition结合animate.css动画库

1. 安装

npm install animate.css --save

2. 在main.js中引用

import animated from 'animate.css' Vue.use(animated)

3. 在transition标签上使用

<transition enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__fadeInDown"><div class=""> 测试animate.css</div>
</transition>

此处有坑：4.x版本的animate在使用的时候要在动画名称加前缀animate__动画名 ，其他版本的不用直接使用动画名称就行

transition-group

在某一项被插入或者移出时，它周围的元素会立即发生‘跳跃’而不是平稳的移动。我们可以通过添加一些额外的CSS规则来解决这个问题

.list-move, /* 对移动中的元素应用的过渡 */.list-enter-active,.list-leave-active {transition: all 0.5s ease;
}.list-enter-from,.list-leave-to {opacity: 0;transform: translateX(30px);
}/* 确保将离开的元素从布局流中删除以便能够正确地计算移动的动画。 */
.list-leave-active {position: absolute;
}