vue transition结合animate.css动画库

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;
}