Vue3 Transition组件实战指南，打造丝滑动画效果的5个核心技巧

<Transition name="fade">
  <div v-if="show">需要动画的元素</div>
</Transition>

/* 进入动画 */
.fade-enter-from { opacity: 0; }
.fade-enter-active { transition: opacity 0.5s ease; }
.fade-enter-to { opacity: 1; }

/* 离开动画 */
.fade-leave-from { opacity: 1; }
.fade-leave-active { transition: opacity 0.5s ease; }
.fade-leave-to { opacity: 0; }

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

.list-move { /* 对移动中的元素应用的过渡 */
  transition: all 0.8s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-active {
  position: absolute; /* 避免离开时影响布局 */
}

<router-view v-slot="{ Component }">
  <Transition name="slide" mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

.slide-enter-from {
  transform: translateX(100px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
>
  <div v-show="show">高级动画元素</div>
</Transition>

// 在组合式API中使用
const onBeforeEnter = (el) => {
  gsap.set(el, { scale: 0.8, rotation: -15 }) // GSAP初始化
}

const onEnter = (el, done) => {
  gsap.to(el, {
    duration: 1,
    scale: 1,
    rotation: 0,
    ease: "elastic.out(1, 0.8)",
    onComplete: done
  })
}

import { ref, reactive, computed } from 'vue'
import gsap from 'gsap'

const count = ref(0)
const animatedCount = reactive({ value: 0 })

watch(count, (newVal) => {
  gsap.to(animatedCount, {
    duration: 0.8,
    value: newVal,
    ease: "power3.out"
  })
})

<!-- 在模板中使用 -->
<div>{{ Math.round(animatedCount.value) }}</div>

<Transition @after-enter="enableDrag">
  <div v-if="show" class="draggable-card" ref="card">
    可拖拽卡片
  </div>
</Transition>

// 配合拖拽库实现
import { useDraggable } from '@vueuse/core'

const enableDrag = () => {
  const card = ref(null)
  const { x, y } = useDraggable(card, {
    initialValue: { x: 0, y: 0 },
    onEnd(position) {
      if (position.y > 200) {
        // 拖拽超过阈值关闭卡片
        show.value = false
      } else {
        // 返回原位
        gsap.to(card.value, { x: 0, y: 0, duration: 0.6 })
      }
    }
  })
}

/* 解决方案 */
.v-leave-active {
  position: absolute;
  width: 100%;
}

<Transition appear>
  <!-- 添加appear属性启用初始渲染动画 -->
</Transition>

<Transition mode="out-in">
  <!-- 模式设置为out-in确保顺序 -->
</Transition>

// 手动控制过渡周期
<Transition :css="false">
  <!-- 禁用CSS自动检测 -->
</Transition>

<Transition name="card" mode="out-in">
  <div v-if="product" class="product-card" :key="product.id">
    <img :src="product.image" />
    <h3>{{ product.name }}</h3>
    <button @click="addToCart">加入购物车</button>
  </div>
</Transition>

/* 卡片动画 */
.card-enter-from {
  opacity: 0;
  transform: scale(0.8) rotate(5deg);
}
.card-enter-active {
  transition: 
    opacity 0.6s ease-out,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-leave-to {
  opacity: 0;
  transform: translateY(20%);
}
.card-leave-active {
  transition: 
    opacity 0.4s,
    transform 0.5s ease-in;
  position: absolute;
}