过渡动画系统变更

过渡动画系统变更

Vue.js 的过渡动画系统在多个版本迭代中经历了显著变化，从基础的 CSS 类名控制到更灵活的 JavaScript 钩子集成。这些改动直接影响开发者处理元素进入/离开动画的方式，尤其在动态组件和条件渲染场景下表现明显。

类名机制的变化

早期版本依赖固定的 CSS 类名结构，例如 v-enter、v-leave-to 等。3.x 版本改为更语义化的命名约定：

/* Vue 2.x */
.v-enter-active { transition: opacity 0.5s; }

/* Vue 3.x */
.v-enter-from { opacity: 0; }
.v-enter-active { transition: opacity 0.5s; }

新版本拆分初始状态（-from）和结束状态（-to），使得多阶段动画控制更精确。当给 <transition> 指定 name 属性时，前缀会自动替换：

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

<style>
.fade-enter-from { transform: scale(0); }
.fade-enter-active { transition: transform 0.3s cubic-bezier(0.5, 1, 0.89, 1); }
</style>

JavaScript 钩子的增强

2.x 版本主要通过 @before-enter 等事件处理动画逻辑，3.x 则通过 @enter 等更细粒度的回调实现复杂序列：

// Vue 3 示例
function onEnter(el, done) {
  const tl = gsap.timeline({ onComplete: done })
  tl.from(el, { x: -100, duration: 0.5 })
    .to(el, { rotation: 360, duration: 1 })
}

结合 appear 属性可处理初始渲染动画：

<transition
  appear
  @before-appear="customBeforeAppear"
  @appear="customAppear"
>
  <div>初始加载动画</div>
</transition>

列表过渡的改进

<transition-group> 在 3.x 中不再默认渲染 <span> 包裹元素，通过 tag 属性指定容器：

<transition-group tag="ul" name="list">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

<style>
.list-move { transition: transform 0.8s ease; }
</style>

新增的 move-class 可覆盖移动过渡类名，配合 FLIP 动画技术实现流畅重排序效果。

组合式 API 集成

在 setup 中使用 useTransition 可编程式控制动画状态：

import { useTransition } from 'vue'

export default {
  setup() {
    const { transitionState, startTransition } = useTransition({
      duration: 1000,
      onFinished: () => console.log('动画结束')
    })

    function trigger() {
      startTransition({
        from: { opacity: 0 },
        to: { opacity: 1 }
      })
    }

    return { transitionState, trigger }
  }
}

性能优化策略

3.x 版本引入动画缓存机制，对 v-show 切换的元素复用过渡效果。通过 mode 属性控制时序：

<transition mode="out-in">
  <component :is="currentView"></component>
</transition>

使用 duration 显式声明动画时长可避免动态检测开销：

<transition :duration="{ enter: 500, leave: 800 }">
  <div v-if="show">内容</div>
</transition>

与第三方库的协同

与 GSAP 的配合示例展示更复杂的动画编排：

import { onMounted } from 'vue'
import gsap from 'gsap'

export default {
  setup() {
    onMounted(() => {
      gsap.from('.box', {
        stagger: 0.1,
        y: 50,
        duration: 0.5
      })
    })
  }
}

自定义过渡指令

创建可复用的动画指令：

app.directive('bounce', {
  mounted(el) {
    el.style.transition = 'transform 0.5s'
    el.addEventListener('mouseenter', () => {
      el.style.transform = 'scale(1.1)'
    })
  }
})

响应式动画参数

根据数据动态调整动画属性：

<transition :name="animationType">
  <div v-show="isVisible">动态动画</div>
</transition>

<script>
export default {
  data() {
    return {
      animationType: 'fade',
      isVisible: false
    }
  },
  watch: {
    windowWidth(newVal) {
      this.animationType = newVal > 768 ? 'slide' : 'fade'
    }
  }
}
</script>

过渡模式的高级用法

mode="in-out" 与 mode="out-in" 之外，可通过绝对定位实现同步过渡：

.transition-container {
  position: relative;
}
.transition-item {
  position: absolute;
  top: 0;
  left: 0;
}

动画生命周期变更

2.x 的 @after-enter 在 3.x 中改为 @afterEnter 驼峰命名，与其它事件保持一致：

<transition
  @afterEnter="handleAfterEnter"
  @enterCancelled="handleCancel"
>
  <!-- 内容 -->
</transition>