Vue——transition组件

最新推荐文章于 2024-07-02 16:56:38 发布

weixin_41387874

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量4.6k

点赞数 8

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41387874/article/details/123237340

版权

本文介绍了Vue的<transition>组件，用于创建过渡效果。当元素或组件被插入、更新或移除时，<transition>会触发过渡。过渡效果可通过CSS transition或animation或JavaScript钩子函数实现。文章详细阐述了<transition>的执行逻辑、使用方法，包括CSS类名的生成和自定义，以及如何指定过渡持续时间。

摘要由CSDN通过智能技术生成

Vue的transition组件

使用<transition>的时机，为什么使用<transition>，<transition>的实现原理
首先我们需要理解<transition>有什么作用
<transition>组件用于给某个元素或组件添加过渡动画效果，只需要用<transition>把该元素或组件包裹起来，就可以封装成过渡组件。
<transition name="fade">
	<my-component></my-component>
</transition>
<transition>的过渡效果出现时机

vue只有在插入、更新、移除DOM元素时，才会触发过渡效果

所以只有在被插入、更新、移除的时候，封装成过渡组件才会出现过渡效果。

<transition>过渡效果的实现原理

<transition>的过渡效果的实现原理有2种

利用CSS transition或animation来实现

利用JavaScript钩子函数来实现

也就是说，我们使用过渡组件也需要使用CSS或JavaScript来为它定义过渡效果。

过渡组件的过渡效果的执行逻辑

当有一个过渡组件A被插入、更新、移除后，会经过以下3步