深入解析vue的transition过渡动画使用和优化

最新推荐文章于 2025-06-12 16:05:34 发布

冲浪的鹏多多

最新推荐文章于 2025-06-12 16:05:34 发布

阅读量1.2k

点赞数 36

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/pdd11997110103/article/details/148518245

Vue 专栏收录该内容

45 篇文章

订阅专栏

文章目录

1. 前言
2. 属性
3. 事件
4. 原理
5. 使用场景
6. 实用技巧
- - 6.1 自定义过渡类
  - 6.2 JavaScript 钩子
7. 注意事项
8. 性能优化

1. 前言

组件用于在元素进入或离开 DOM 时应用过渡效果。它是 Vue 内置的组件，无需额外安装即可使用。这意味着它在任意别的组件中都可以被使用。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。它通过在特定时刻给元素或组件增加、移除class类名来实现，下面是详细的应用和解析。

2. 属性

属性名	类型	默认值	可选值	说明
name	string	‘v’	-	用于自动生成 CSS 过渡类名前缀，例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等
appear	boolean	false	-	是否在初始渲染时使用过渡
css	boolean	true	-	是否使用 CSS 过渡类，如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子
type	string	-	‘transition’ ‘animation’	指定过渡事件类型，默认会自动检测
mode	string	-	‘out-in’ ‘in-out’	控制离开/进入过渡的时间序列，默认情况下两个元素会同时执行过渡
duration	number/object	-	{ enter: number, leave: number }	指定过渡的持续时间，单位为毫秒
enter-class	string	-	-	自定义进入过渡的初始类名
leave-class	string	-	-	自定义离开过渡的初始类名
appear-class	string		-	自定义初始渲染的过渡类名
enter-to-class	string	-	-	自定义进入过渡结束时的类名
leave-to-class	string	-	-	自定义离开过渡结束时的类名
enter-active-class	string	-	-	自定义进入过渡的活跃状态类名
leave-active-class	string	-	-	自定义离开过渡的活跃状态类名
appear-active-class	string	-	-	自定义初始渲染的过渡活跃状态类名

3. 事件

事件名	说明
before-enter	进入过渡开始前触发
before-leave	离开过渡开始前触发
before-appear	初始渲染过渡开始前触发
enter	进入过渡开始时触发
leave	离开过渡开始时触发
appear	初始渲染过渡开始时触发
after-enter	进入过渡完成后触发
after-leave	离开过渡完成后触发
after-appear	初始渲染过渡完成后触发
enter-cancelled	进入过渡被取消时触发
leave-cancelled	离开过渡被取消时触发，只有v-show有
appear-cancelled	初始渲染过渡被取消时触发

4. 原理

总结起来就是，通过添加和移除类名来触发 CSS 的 transition 或 animation ，来达到过渡效果。步骤如下：

挂载阶段：当包裹在内的元素首次渲染到 DOM 时，它会立即显示，没有过渡效果。
DOM 更新：当触发了元素的显示或隐藏操作，比如修改了 v-if、v-show、或者条件渲染的数据，Vue 会执行一次重新渲染。
过渡类名添加：在重新渲染过程中，Vue 会根据过渡效果的配置为元素添加一系列类名，这些类名用于触发 CSS 过渡效果，比如v-enter，v-enter-active，v-enter-to，v-leave等等
过渡执行：通过添加上述的类名，触发了 CSS 过渡效果。
过渡结束：一旦过渡效果执行完毕，Vue 会自动移除相应的过渡类名，使元素回到普通状态。
钩子函数：如果需要在过渡过程中执行一些 JavaScript 逻辑，可以使用 @enter、@leave 等事件钩子函数。

5. 使用场景

列表、按钮，文字，各种过渡效果
页面切换动画等
表单验证反馈动画
模态框/抽屉的显示隐藏
图片懒加载时的淡入效果

6. 实用技巧

6.1 自定义过渡类

通过自定义过渡类，可以实现更复杂的过渡效果：

<template>
  <div>
    <transition name="bounce">
      <div v-show="show">Bounce!</div>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>

6.2 JavaScript 钩子

使用 JavaScript 钩子可以实现更精细的动画控制：

<template>
  <transition
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-show="show">JavaScript Animation</div>
  </transition>
</template>

<script>
export default {
  methods: {
    enter(el, done) {
      // 设置初始状态
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
      
      // 使用 requestAnimationFrame 确保浏览器渲染初始状态
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          el.style.transition = 'opacity 300ms, transform 300ms'
          el.style.opacity = 1
          el.style.transform = 'translateY(0)'
          
          // 动画结束后调用 done
          setTimeout(done, 300)
        })
      })
    },
    leave(el, done) {
      el.style.transition = 'opacity 300ms, transform 300ms'
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
      setTimeout(done, 300)
    }
  }
}
</script>