可能不生效的几个注意点
- 选择器的优先级
- 谨慎合并样式
显示三阶段和隐藏三阶段的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;}
常用属性
<Transitionname="custom-classes"appearduration="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属性
<Transitionenter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"
>