1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<style>
/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

/* 开始状态（即将进入）/ 结束状态（即将离开）*/
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<style>
.my-transition-enter-active {
  /* 整个进入过程持续300ms，使用ease-out缓动 */
  transition: all 0.3s ease-out;
}

.my-transition-leave-active {
  /* 整个离开过程持续200ms，使用ease-in缓动 */
  transition: all 0.2s ease-in;
}

/* 进入的起始位置：向左偏移100px，透明度为0 */
.my-transition-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}

/* 离开的结束位置：向右偏移100px，透明度为0 */
.my-transition-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<template>
  <button @click="toggle">切换侧边栏</button>
  
  <Transition name="slide">
    <div v-if="isOpen" class="sidebar">
      <h3>侧边栏内容</h3>
      <p>这里是可以滑入滑出的内容区域...</p>
    </div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)

function toggle() {
  isOpen.value = !isOpen.value
}
</script>

<style scoped>
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 滑入：从左侧滑入，opacity从0到1 */
.slide-enter-active {
  transition: all 0.3s ease-out;
}

.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

/* 滑出：向左滑出，opacity从1到0 */
.slide-leave-active {
  transition: all 0.3s ease-in;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<template>
  <button @click="showModal = true">打开弹窗</button>
  
  <Transition name="modal">
    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
      <div class="modal-content">
        <h2>模态框标题</h2>
        <p>这是一个带缩放效果的弹窗，点击外部可以关闭。</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  min-width: 400px;
}

/* 缩放动画：弹入效果 */
.modal-enter-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-leave-active {
  transition: all 0.2s ease-in;
}

/* 从中心缩放：scale(0.8) -> scale(1) */
.modal-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.modal-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<template>
  <Transition name="fade-slide">
    <div v-if="isVisible" class="notification">
      <span class="icon">✓</span>
      <span class="message">操作成功！</span>
    </div>
  </Transition>
</template>

<style scoped>
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4CAF50;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.icon {
  font-size: 20px;
}

/* 组合动画：淡入 + 从右侧滑入 */
.fade-slide-enter-active {
  transition: all 0.4s ease-out;
}

.fade-slide-leave-active {
  transition: all 0.3s ease-in;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!-- 默认：同时进行（可能显得拥挤） -->
<Transition name="fade">
  <div v-if="show" class="old-view">旧视图</div>
  <div v-else class="new-view">新视图</div>
</Transition>

<!-- 先进后出：先让旧的离开，新的再进来 -->
<Transition name="fade" mode="out-in">
  <div v-if="show" class="view">视图 A</div>
  <div v-else class="view">视图 B</div>
</Transition>

<!-- 先进后出：新的先进来，旧的再离开 -->
<Transition name="fade" mode="in-out">
  <div v-if="show" class="view">视图 A</div>
  <div v-else class="view">视图 B</div>
</Transition>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* out-in 模式的样式 */
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
  position: absolute; /* 防止布局跳动 */
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<template>
  <div class="list-demo">
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除最后一项</button>
    
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'Vue 3 真棒' },
  { id: 2, text: 'Composition API 很强' },
  { id: 3, text: '动画让界面更生动' }
])

let nextId = 4

function addItem() {
  items.value.push({ id: nextId++, text: `新项目 ${nextId}` })
}

function removeItem() {
  items.value.pop()
}
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 12px;
  margin: 8px 0;
  background: #e3f2fd;
  border-radius: 4px;
  /* 过渡效果 */
  transition: all 0.3s ease;
}

/* 列表过渡动画 */
.list-enter-active {
  transition: all 0.4s ease-out;
}

.list-leave-active {
  transition: all 0.3s ease-in;
  /* 关键：离开时需要绝对定位才能让其他元素平滑移动 */
  position: absolute;
}

.list-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 列表项之间的间距需要通过gsap或其他方式调整 */
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<template>
  <button @click="shuffle">打乱顺序</button>
  
  <TransitionGroup name="flip" tag="div" class="grid">
    <div v-for="item in items" :key="item.id" class="card">
      {{ item.value }}
    </div>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue'

// 初始数据
const items = ref([
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
  { id: 3, value: 'C' },
  { id: 4, value: 'D' },
  { id: 5, value: 'E' },
  { id: 6, value: 'F' }
])

// Fisher-Yates 洗牌算法
function shuffle() {
  const arr = [...items.value]
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
  items.value = arr
}
</script>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
}

.card {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 8px;
}

/* FLIP 过渡动画 */
.flip-move {
  /* 移动过渡的关键！ */
  transition: transform 0.5s ease;
}

.flip-enter-active {
  transition: all 0.5s ease;
}

.flip-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}

.flip-enter-from {
  opacity: 0;
  transform: scale(0.5);
}

.flip-leave-to {
  opacity: 0;
  transform: scale(0.5);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 1. 列表项需要相对定位（为FLIP计算提供基准） */
.grid {
  position: relative;
}

/* 2. 离开的元素需要脱离文档流（避免留下空白） */
.flip-leave-active {
  position: absolute;
}

/* 3. 移动过渡（FLIP的核心） */
.flip-move {
  transition: transform 0.5s ease;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<template>
  <div class="stats">
    <div class="stat-item">
      <span class="label">用户总数</span>
      <!-- animatedUsers 是不断变化的小数，toFixed(0) 取整数显示 -->
      <span class="value">{{ animatedUsers.toFixed(0) }}</span>
    </div>
    <button @click="updateUsers">更新数据</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 数字动画 composable：把普通数值 ref 包装成带滚动动画的版本
function useAnimatedNumber(source) {
  const output = ref(source.value)  // 输出值（不断变化）
  let animationFrame = null  // 动画帧 ID（用于取消动画）

  function animate(targetValue, duration = 800) {
    if (animationFrame) cancelAnimationFrame(animationFrame)
    const startValue = output.value
    const startTime = performance.now()  // 记录开始时间

    function step(currentTime) {
      const elapsed = currentTime - startTime  // 已经过了多久
      const progress = Math.min(elapsed / duration, 1)  // 0~1 的进度
      // easeOutExpo 缓动函数：数字"前快后慢"，更符合人眼习惯
      const ease = 1 - Math.pow(1 - progress, 3)
      output.value = startValue + (targetValue - startValue) * ease
      if (progress < 1) {
        animationFrame = requestAnimationFrame(step)  // 继续下一帧
      }
    }

    animationFrame = requestAnimationFrame(step)  // 启动动画
  }

  // 监听源数据变化，自动触发动画
  watch(source, (newVal) => animate(newVal))
  return output
}

const users = ref(0)
const animatedUsers = useAnimatedNumber(users)  // 传入原始 ref，得到带动画的输出

function updateUsers() {
  users.value = Math.floor(Math.random() * 10000)
}
</script>

<style scoped>
.stats {
  text-align: center;
  padding: 40px;
}

.stat-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  color: #666;
  margin-bottom: 8px;
}

.value {
  font-size: 48px;
  font-weight: bold;
  color: #42b883;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<template>
  <div class="color-demo">
    <!-- :style 绑定背景色，Vue 会自动更新 -->
    <div
      class="color-box"
      :style="{ backgroundColor: currentColor }"
    ></div>
    <button @click="changeColor">换一组颜色</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 预设的颜色组合（每次点击切换到下一组）
const colorPairs = [
  { from: '#FF6B6B', to: '#4ECDC4' },  // 红 → 青
  { from: '#4ECDC4', to: '#45B7D1' },  // 青 → 蓝
  { from: '#45B7D1', to: '#96CEB4' },  // 蓝 → 绿
  { from: '#96CEB4', to: '#F7DC6F' },  // 绿 → 黄
]

const currentIndex = ref(0)
const currentColor = ref(colorPairs[0].from)

function changeColor() {
  currentIndex.value = (currentIndex.value + 1) % colorPairs.length
  // CSS transition 会自动处理颜色渐变，JavaScript 只需要更新目标颜色
  currentColor.value = colorPairs[currentIndex.value].from
}
</script>

<style scoped>
.color-box {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  margin: 20px auto;
  /* CSS transition：Vue 更新 backgroundColor 时，自动平滑过渡 */
  transition: background-color 0.8s ease;
}

button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/user/123">用户</router-link>
    </nav>
    
    <!-- 路由过渡 -->
    <router-view v-slot="{ Component }">
      <Transition name="page" mode="out-in">
        <component :is="Component" />
      </Transition>
    </router-view>
  </div>
</template>

<style>
.page-enter-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!-- App.vue -->
<template>
  <router-view v-slot="{ Component, route }">
    <Transition :name="route.meta.transition || 'fade'" mode="out-in">
      <component :is="Component" />
    </Transition>
  </router-view>
</template>

<script setup>
// 路由配置中设置 meta.transition
// { path: '/', component: Home, meta: { transition: 'slide' } }
// { path: '/about', component: About, meta: { transition: 'fade' } }
</script>

<style>
/* 淡入淡出（默认） */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动效果 */
.slide-enter-active {
  transition: all 0.3s ease-out;
}
.slide-leave-active {
  transition: all 0.2s ease-in;
}
.slide-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

/* 缩放效果 */
.scale-enter-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-leave-active {
  transition: all 0.2s ease-in;
}
.scale-enter-from {
  transform: scale(0.9);
  opacity: 0;
}
.scale-leave-to {
  transform: scale(1.1);
  opacity: 0;
}
</style>

1

pnpm add gsap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<template>
  <div ref="boxRef" class="gsap-box">GSAP 动画</div>
  <button @click="animateBox">播放动画</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { gsap } from 'gsap'

const boxRef = ref(null)

function animateBox() {
  const box = boxRef.value
  
  // 创建一个时间线动画序列
  const tl = gsap.timeline()
  
  // 第1步：从下方滑入
  tl.fromTo(box, 
    { y: 100, opacity: 0 },
    { y: 0, opacity: 1, duration: 0.5, ease: 'power2.out' }
  )
  
  // 第2步：轻微弹跳
  .to(box, 
    { scale: 1.1, duration: 0.15, ease: 'power1.inOut' }
  )
  .to(box, 
    { scale: 1, duration: 0.15, ease: 'elastic.out(1, 0.5)' }
  )
  
  // 第3步：摇晃
  .to(box, 
    { rotation: 10, duration: 0.1, ease: 'power1.inOut' }
  )
  .to(box, 
    { rotation: -10, duration: 0.1, ease: 'power1.inOut' }
  )
  .to(box, 
    { rotation: 0, duration: 0.1, ease: 'power1.inOut' }
  )
  
  // 第4步：向上消失
  .to(box, 
    { y: -100, opacity: 0, duration: 0.4, ease: 'power2.in' }
  )
}

// 入场动画
onMounted(() => {
  gsap.fromTo(box, 
    { scale: 0, rotation: 180 },
    { 
      scale: 1, 
      rotation: 0, 
      duration: 0.8, 
      ease: 'back.out(1.7)',
      delay: 0.2
    }
  )
})
</script>

<style scoped>
.gsap-box {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  margin: 50px auto;
  cursor: pointer;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<template>
  <button @click="show = !show">切换</button>
  
  <TransitionGroup name="list" tag="div" class="items">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.text }}
    </div>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue'
import { gsap } from 'gsap'

const items = ref([
  { id: 1, text: '项目 1' },
  { id: 2, text: '项目 2' },
  { id: 3, text: '项目 3' }
])

function addItem() {
  const newId = items.value.length + 1
  items.value.push({ id: newId, text: `项目 ${newId}` })
}

function removeItem(index) {
  items.value.splice(index, 1)
}
</script>

<style scoped>
.items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.item {
  padding: 15px;
  background: #e3f2fd;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.item:hover {
  background: #bbdefb;
}
</style>

1

pnpm add animejs

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<template>
  <div class="anime-demo">
    <div ref="targetsRef" class="target">
      <div class="dot" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
      <div class="dot" data-index="3"></div>
      <div class="dot" data-index="4"></div>
    </div>
    
    <div class="controls">
      <button @click="animateStagger">错位动画</button>
      <button @click="animateMorph">变形动画</button>
      <button @click="animateTimeline">时间线</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import anime from 'animejs'

const targetsRef = ref(null)

function animateStagger() {
  anime({
    targets: '.dot',
    translateX: 270,
    borderRadius: ['0%', '50%'],
    backgroundColor: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'],
    // 错位延迟，每个元素延迟50ms
    delay: anime.stagger(50, { from: 'center' }),
    easing: 'easeInOutQuad',
    duration: 800
  })
}

function animateMorph() {
  anime({
    targets: '.target',
    scale: [1, 1.5, 1],
    rotate: [0, 180, 360],
    duration: 1000,
    easing: 'easeInOutSine'
  })
}

function animateTimeline() {
  const timeline = anime.timeline({
    easing: 'easeOutExpo'
  })

  timeline
    .add({
      targets: '.target',
      scale: [0, 1],
      duration: 500
    })
    .add({
      targets: '.dot',
      translateY: [-50, 0],
      opacity: [0, 1],
      delay: anime.stagger(100)
    }, '-=200')
    .add({
      targets: '.target',
      rotate: 360,
      duration: 800
    })
}
</script>

<style scoped>
.anime-demo {
  text-align: center;
  padding: 40px;
}

.target {
  width: 300px;
  height: 100px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.dot {
  width: 40px;
  height: 40px;
  background: #42b883;
  border-radius: 50%;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #3aa876;
}
</style>