Vue 关于过渡的使用场景

本文详细介绍Vue.js中的过渡效果实现方式,包括单元素/组件过渡、多元素切换过渡、多组件切换过渡以及列表过渡等四种过渡类型,并解释了如何使用css过渡、css动画和JavaScript钩子函数来实现这些过渡效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

*本文只是将官网的内容进行简单的整理,可点击查看实例查看官网具体描述及源码实例。

当从 DOM 中插入、更新或移除项目时,Vue 提供多种应用过渡效果的方式。具体可以分为以下三类:单元素/组件件的过渡、多元素间的切换过渡、多组件间的切换过渡。

1. 单元素/组件间的过渡
定义:任何组件/元素添加进入/离开过渡
方式:css过渡、css动画、js钩子函数--(使用v-if、v-show达到效果)
css过渡和css动画都是增加或者删除css过渡clas,唯一的区别是v-enter在元素插入dom后并不会立即删除,会在动画触发时删除。
过渡类型有6种:v-enter,v-enter-active、v-enter-to, v-leave,v-leave-active, v-leave-to。其存在周期如下图所示:

js钩子函数有:before-enter, enter,after-enter, before-cancelled、before-leave、leave、after-leave、leave-cancelled
2. 多元素间的切换过渡
定义:多个元素间进行切换显示,添加key元素至关重要
方式:依然可以使用v-if、v-show,或者在js中进行switch/case之类的筛选
3. 多组件间的切换过渡
定义:动态切换组件,不需要key属性
方式:<component v-bind:is="view"></component> view字段标注使用组件的名称
4. 列表过渡
定义:列表的每一项都需要进行过渡
方式:<transition-group></transition-group>默认渲染成span,也可以通过tag标签修改

注意事项:
1. <transition></transition>不会以真实的元素渲染,<transiton-group></transition-group>会默认渲染成span
2. JavaScript 式过渡的时候, 在 enter 和 leave 钩子函数中,必须有 done 回调函数。否则,这两个钩子函数会被同步调用,过渡会立即完成

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值