Vue中transition过渡动画组件

最新推荐文章于 2026-05-17 13:51:16 发布

原创最新推荐文章于 2026-05-17 13:51:16 发布 · 876 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发

本文详细介绍了Vue中的transition组件及其用法，包括如何为元素和组件添加进入/离开过渡动画。过渡类名如v-enter、v-leave等在不同阶段的应用，以及如何通过name属性自定义过渡的class前缀。同时，讨论了CSS的transition属性，包括transition-property、transition-duration、transition-timing-function和transition-delay，以及如何定义过渡速度曲线。文章还提供了浏览器支持情况和代码示例，帮助开发者实现平滑的过渡效果。

概述

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡。
主要用于 v-show, v-if 或 router-view 的过渡动画；

过度类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-so0Shrmz-1659890727878)(/images/frontEnd/vue/img_2.png)]

name属性

给transition组件设置不同的name， name名及class类名的前缀

<transition name="plus-icon">
      <div class="icon-plus"
           v-if="flag">
           <img />
      </div>
</transition>

/*过度后效果以本身class样式决定,*/
  .icon-plus {
      opacity: 1;
  }
  .plus-icon-enter-active{
    transition: all.5s;
  }
  .plus-icon-enter{
     opacity: 0;
  }
  .plus-icon-leave-active{
    transition: all.5s;
  }
  .plus-icon-leave-to{
    opacity: 0;
  }

css的transition属性

transition简介： css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，
从而表现出一种动画过程。根据开始状态和结束状态的具体数值，计算出中间状态。
transition属性语法： css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，
从而表现出一种动画过程。根据开始状态和结束状态的具体数值，计算出中间状态。

属性	介绍
transition-property	规定设置过渡效果的 CSS 属性的名称。例如, opacity,color。默认值是all。
transition-duration	规定完成过渡效果需要多少秒或毫秒。例如，1s。默认值是0s。
transition-timing-function	规定速度效果的速度曲线。例如, linear、 ease-in、steps动画分段函数或自定义的 cubic-bezier 函数)。默认值是ease，中间快，两头慢。
transition-delay	定义过渡效果何时开始。例如，1s。默认值是0s。

过度速度曲线：
简写语法：

transition: property duration timing-function delay;
transition: opacity 1s linear 2s;

浏览器支持

Internet Explorer 10+
Firefox
Opera
Chrome
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

参考文章： https://juejin.cn/post/7038404182516187173

标签

#vue.js #前端 #javascript