vue transition组件

可能不生效的几个注意点

• 选择器的优先级
• 谨慎合并样式

显示三阶段和隐藏三阶段的class名

• 1、vue2中显示的初始阶段类名是：v-enter；隐藏的初始阶段类名是：v-leave
• 2、v-enter-active、v-leave-active这两个 class 可以被用来定义动画的持续时间、延迟与速度曲线类型。其他class可以定义显示开始和结束时的样式、隐藏开始和结束时的样式。

.v-enter-active,
.v-leave-active {
  // transition: all 0.5s ease;
  transition：opacity 0.5s ease；
}
.v-enter-from{opacity: 0;}
.v-enter-to{opacity: 1;}
.v-leave-from{opacity: 1;}
.v-leave-to {opacity: 0;}

常用属性

<Transition
  name="custom-classes"
  appear
  duration="2000"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>
.custom-classes-enter-from{opacity:1}

• name 替代class前缀
• enter-active-class 覆盖相应阶段的class名
• leave-active-class 覆盖相应阶段的class名
• appear 初始也有效果
• duration（单位：毫秒）

快速使用animate库

1、安装animate库，并在main.js中引入

npm i animate.css
import 'animate.css'

2、使用库中的类名来设置enter-active-class属性和 leave-active-class属性

<Transition
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>