彻底搞懂Transition内置组件.docxVIP

第

彻底搞懂Transition内置组件

目录前言Transition内置组件触发条件再分类六个过渡时机Transition组件CSStransition属性核心原理实现Transition组件原生DOM如何实现过渡？原生DOM元素移动示例进场动效离场动效实现Transition组件最后

前言

Transition作为一个Vue中的内置组件，它可以将进入动画和离开动画应用到通过默认插槽传递给目标元素或组件上。

也许你有在使用，但是一直不清楚它的原理或具体实现，甚至不清楚其内部提供的各个class到底怎么配合使用，想看源码又被其中各种引入搞得七荤八素...

本篇文章就以Transition组件为核心，探讨其核心原理的实现，文中不会对其各个属性再做额外解释，毕竟这些看文档就够了，希望能够给你带来帮助！！！

Transition内置组件

触发条件

Transition组件的进入动画或离开动画可通过以下的条件之一触发：

由v-if所触发的切换由v-show所触发的切换由特殊元素componentname=x切换的动态组件改变特殊的key属性

再分类

其实我们可以将以上情况进行再分类：

组件挂载和销毁

v-if的变化componentname=x的变化key的变化组件样式属性display:none|x设置

v-show的变化

【扩展】v-if和v-for一起使用时，在Vue2和Vue3中的不同

在Vue2中，当它们处于同一节点时，v-for的优先级比v-if更高，即v-if将分别重复运行于每个v-for循环中，也就是v-if可以正常访问v-for中的数据在Vue3中，当它们处于同一节点时，v-if的优先级比v-for更高，即此时只要v-if的值为false则v-for的列表就不会被渲染，也就是v-if不能访问到v-for中的数据

六个过渡时机

总结起来就分为进入和离开动画的初始状态、生效状态、结束状态，具体如下：

v-enter-from

进入动画的起始状态在元素插入之前添加，在元素插入完成后的下一帧移除v-enter-active

进入动画的生效状态，应用于整个进入动画阶段在元素被插入之前添加，在过渡或动画完成之后移除这个class可以被用来定义进入动画的持续时间、延迟与速度曲线类型v-enter-to

进入动画的结束状态在元素插入完成后的下一帧被添加(也就是v-enter-from被移除的同时)，在过渡或动画完成之后移除v-leave-from

离开动画的起始状态在离开过渡效果被触发时立即添加，在一帧后被移除v-leave-active

离开动画的生效状态，应用于整个离开动画阶段在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除这个class可以被用来定义离开动画的持续时间、延迟与速度曲线类型v-leave-to

离开动画的结束状态在一个离开动画被触发后的下一帧被添加(即v-leave-from被移除的同时)，在过渡或动画完成之后移除

其中的v前缀是允许修改的，可以Transition组件传一个name的prop来声明一个过渡效果名，如下就是将v前缀修改为**`

modal`**前缀：

Transitionname=modal.../Transition

Transition组件CSStransition属性

以上这个简单的效果，核心就是两个时机：

v-enter-active进入动画的生效状态v-leave-active离开动画的生效状态

再配合简单的CSS过渡属性就可以达到效果，代码如下：

template

div

transitionname=golden

!--金子列表--

divv-show=show

:key=idx

v-for=idxin3

src=../assets/golden.jpg

/div

/transition

/div

!--钱袋子--

img@click=show=!showsrc=../assets/purse.pngalt=/

/template

scriptsetuplang=ts

import{ref,computed}fromvue

constshow=ref(true)

/script

stylelang=lessscop