transition结合animate.css动画库
- 安装
npm install animate.css --save
- 在main.js中引用
import animated from 'animate.css' Vue.use(animated)
- 在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__动画名 ，其他版本的不用直接使用动画名称就行文章来源：https://www.toymoban.com/news/detail-830586.html
transition-group
在某一项被插入或者移出时，它周围的元素会立即发生‘跳跃’而不是平稳的移动。我们可以通过添加一些额外的CSS规则来解决这个问题文章来源地址https://www.toymoban.com/news/detail-830586.html
.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;
}
到了这里，关于vue transition结合animate.css动画库的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
