vue transition组件及常用属性
作者：monstkl
在使用Vue过渡动画时,注意选择器优先级,谨慎合并样式,Vue2中关于显示隐藏的类名有v-enter、v-leave以及v-enter-active、v-leave-active等,这些可以用来定义动画的持续时间和样式,感兴趣的朋友跟随小编一起看看吧
可能不生效的几个注意点
- 选择器的优先级
- 谨慎合并样式
显示三阶段和隐藏三阶段的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" >
到此这篇关于vue transition组件的文章就介绍到这了,更多相关vue transition组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！