vue transition组件及常用属性

更新时间：2024年09月11日 12:14:19 作者：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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目多环境配置(.env)的实现
最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下
2021-07-07
vue.js 实现图片本地预览裁剪压缩上传功能
这篇文章主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-03-03
vue如何实现清空this.$route.query的值
这篇文章主要介绍了vue如何实现清空this.$route.query的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue仿今日头条实例详解
这篇文章主要介绍了Vue仿今日头条实例详解，并把相关代码做了说明，对此有兴趣的朋友参考下吧。
2018-02-02
vue3中的事件修饰符详解
Vue3中的事件修饰符包括：.stop（阻止冒泡）、.prevent（阻止默认事件）、.self（阻止自身事件）、.capture（打乱冒泡顺序）、.once（事件只触发一次）和.passive（事件默认行为立即执行）,这些修饰符可以帮助开发者更灵活地控制事件的处理方式
2025-02-02
快速解决vue在ios端下点击响应延时的问题
今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue3.0实践之写tsx语法实例
很久不写博客了,最近在使用ts和tsx开发vue类项目,网上资料比较少,顺便记录一下方便同样开发的人互相学习共同进步,下面这篇文章主要给大家介绍了关于vue3.0实践之写tsx语法的相关资料,需要的朋友可以参考下
2022-07-07
vue日期组件支持vue1.0和2.0
这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Vue大屏数据展示示例
公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，本文主要介绍了Vue大屏数据展示示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue二次封装axios流程详解
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下
2022-10-10