Vue.js: 过渡与动画

<!-- ❌ 翻车版：v-if 突然切换 -->
<template>
  <button @click="currentTab = 'home'">Home</button>
  <button @click="currentTab = 'profile'">Profile</button>
  
  <div v-if="currentTab === 'home'">Home Content</div>
  <div v-else-if="currentTab === 'profile'">Profile Content</div>
</template>

<!-- ✅ 正确版：平滑过渡 -->
<template>
  <button @click="currentTab = 'home'">Home</button>
  <button @click="currentTab = 'profile'">Profile</button>
  
  <Transition name="fade" mode="out-in">
    <div v-if="currentTab === 'home'" key="home">Home Content</div>
    <div v-else-if="currentTab === 'profile'" key="profile">Profile Content</div>
  </Transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <button @click="show = !show">Toggle</button>
  
  <Transition name="fade">
    <p v-if="show">Hello Vue</p>
  </Transition>
</template>

<style>
/* 6 个 CSS class，Vue 自动添加/移除 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

<!-- v-bind:name="fade" → 6 个 class 是 .fade-xxx -->
<Transition name="fade">...</Transition>

<!-- 不写 name → 默认 v-xxx（6 个 class 是 .v-xxx）-->
<Transition>...</Transition>

<!-- 动态 name -->
<Transition :name="transitionName">...</Transition>

<!-- 1. 默认模式：进入和离开同时进行（重叠） -->
<Transition name="fade">
  <div v-if="show">Content</div>
</Transition>

<!-- 2. out-in：先离开后进入（推荐，避免重叠） -->
<Transition name="fade" mode="out-in">
  <div v-if="show">Content</div>
</Transition>

<!-- 3. in-out：先进入后离开（少见） -->
<Transition name="fade" mode="in-out">
  <div v-if="show">Content</div>
</Transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}

.scale-enter-active, .scale-leave-active {
  transition: transform 0.3s;
}
.scale-enter-from, .scale-leave-to {
  transform: scale(0);
}

.rotate-enter-active {
  transition: transform 1s;
}
.rotate-enter-from {
  transform: rotate(0deg);
}
.rotate-leave-active {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.combo-enter-active, .combo-leave-active {
  transition: all 0.3s;
}
.combo-enter-from {
  opacity: 0;
  transform: translateX(-50px) scale(0.8);
}
.combo-leave-to {
  opacity: 0;
  transform: translateX(50px) scale(0.8);
}

<template>
  <button @click="add">Add</button>
  
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <button @click="remove(item.id)">×</button>
    </li>
  </TransitionGroup>
</template>

<script setup>
const { ref } = Vue
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
])

function add() {
  const id = Date.now()
  items.value.push({ id, name: `Item ${id}` })
}

function remove(id) {
  items.value = items.value.filter(i => i.id !== id)
}
</script>

<style>
/* 6 个 class，但用于列表项的 enter/leave/move */
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-leave-active {
  position: absolute;  /* 离开时脱离文档流 */
}
/* 列表项移动时的动画 */
.list-move {
  transition: transform 0.5s;
}
</style>

/* 列表项位置变化时（如排序），自动应用 .list-move */
.list-move {
  transition: transform 0.5s;
}

<template>
  <Transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    :css="false"  <!-- 禁用 CSS class -->
  >
    <p v-if="show">Hello</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function beforeEnter(el) {
  console.log('Before enter:', el)
}

function enter(el, done) {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.5,
    onComplete: done  // 通知完成
  })
}

function afterEnter(el) {
  console.log('After enter:', el)
}

// leave / beforeLeave / afterLeave 类似
</script>

npm install gsap

<template>
  <Transition :css="false" @enter="onEnter" @leave="onLeave">
    <p v-if="show">Hello GSAP</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function onEnter(el, done) {
  gsap.fromTo(el, 
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, duration: 0.5, onComplete: done }
  )
}

function onLeave(el, done) {
  gsap.to(el, { opacity: 0, y: -50, duration: 0.3, onComplete: done })
}
</script>

npm install animate.css

// main.js
import 'animate.css'

<template>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <p v-if="show">Hello</p>
  </Transition>
</template>

npm install @vueuse/motion

// main.js
import { MotionPlugin } from '@vueuse/motion'
app.use(MotionPlugin)

<template>
  <div v-motion :initial="{ opacity: 0, y: 50 }" :enter="{ opacity: 1, y: 0 }">
    Fade in from below
  </div>
</template>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
button { padding: 6px 12px; margin: 4px; background: #42b883; color: white; border: none; border-radius: 4px; cursor: pointer; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.modal { background: white; padding: 2rem; border-radius: 8px; min-width: 300px; }

/* 5 种动画 class */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.slide-enter-active, .slide-leave-active { transition: transform 0.3s; }
.slide-enter-from { transform: translateX(-100%); }
.slide-leave-to { transform: translateX(100%); }

.scale-enter-active, .scale-leave-active { transition: transform 0.3s; }
.scale-enter-from, .scale-leave-to { transform: scale(0); }

.combo-enter-active, .combo-leave-active { transition: all 0.3s; }
.combo-enter-from { opacity: 0; transform: translateY(-30px); }

.list-enter-active, .list-leave-active { transition: all 0.5s; }
.list-leave-to { opacity: 0; transform: translateX(-30px); }
.list-move { transition: transform 0.5s; }
</style>

<div id="app">
  <h4>1. Fade 淡入淡出</h4>
  <button @click="showFade = !showFade">{{ showFade ? '隐藏' : '显示' }}</button>
  <transition name="fade">
    <p v-if="showFade" style="padding: 0.5rem; background: #f0f9ff;">👋 Hello Fade</p>
  </transition>

  <h4>2. Slide 滑动</h4>
  <transition name="slide">
    <p v-if="showSlide" key="slide-text" style="padding: 0.5rem; background: #fef3c7;">👉 Slide 滑入</p>
  </transition>
  <button @click="showSlide = !showSlide">切换</button>

  <h4>3. Scale 缩放（Modal 弹窗）</h4>
  <button @click="showModal = true">打开 Modal</button>
  <transition name="scale">
    <div v-if="showModal" class="modal-bg" @click.self="showModal = false">
      <div class="modal">
        <h3>弹窗内容</h3>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </transition>

  <h4>4. TransitionGroup 列表动画</h4>
  <input v-model="newItem" placeholder="新项目">
  <button @click="addItem">添加</button>
  <transition-group name="list" tag="ul" style="list-style: none; padding: 0;">
    <li v-for="item in items" :key="item.id" style="padding: 4px; background: #ecfdf5; margin: 2px 0;">
      {{ item.name }} <button @click="removeItem(item.id)">×</button>
    </li>
  </transition-group>

  <h4>5. Combo 组合（Tab 切换）</h4>
  <button v-for="tab in tabs" :key="tab" @click="currentTab = tab">{{ tab }}</button>
  <transition name="combo" mode="out-in">
    <p :key="currentTab" style="padding: 0.5rem; background: #eff6ff;">
      当前 Tab: {{ currentTab }}
    </p>
  </transition>
</div>

<script>
const { createApp, ref } = Vue

const App = {
  setup() {
    const showFade = ref(true)
    const showSlide = ref(true)
    const showModal = ref(false)
    const currentTab = ref('Home')
    const tabs = ['Home', 'Profile', 'Settings']
    const newItem = ref('')
    const items = ref([
      { id: 1, name: '项目 1' },
      { id: 2, name: '项目 2' }
    ])
    let nextId = 3

    function addItem() {
      if (!newItem.value.trim()) return
      items.value.push({ id: nextId++, name: newItem.value })
      newItem.value = ''
    }
    function removeItem(id) {
      const idx = items.value.findIndex(i => i.id === id)
      if (idx >= 0) items.value.splice(idx, 1)
    }

    return {
      showFade, showSlide, showModal, currentTab, tabs,
      newItem, items, addItem, removeItem
    }
  }
}

createApp(App).mount('#app')
</script>