Vue基础教程（137）过渡和动画效果：别再说你的页面动起来像PPT！Vue过渡动画秘籍，让你的网页丝滑到飞起！

一、为啥要折腾动画？给用户体验加点“德芙”

想象一下：你刷着某个APP，点击按钮后内容“啪”一下直接切换，是不是感觉像卡了痰的收音机？而当你打开Airbnb，页面元素如清风般淡入，图片放大时带着轻柔缓冲——这种体验，就像巧克力广告里那条丝滑的飘带。

动画不是花里胡哨，而是用户体验的隐形保镖：

• 视觉引导：让用户眼睛知道该往哪看
• 状态反馈：点击按钮后的微动画，像在说“朕已收到”
• 掩盖加载：数据请求时来个loading动画，等待不再焦躁

而Vue的动画系统，好比给你配了位米其林大厨：你只需备好食材（定义动画效果），剩下的火候掌控（DOM插入移除的时机）全交给它！

二、Vue动画基础：transition组件的“保姆级”说明书

2.1 初识<transition>：你的第一个动画保镖

把<transition>组件想象成动画界的万能保镖——只要把它包裹在需要动起来的元素外面，它就会自动在以下六个时机给元素加class或触发钩子：

• 入场三连（元素插入）

• • v-enter-from：入场起始状态（元素插入前，动画未开始）
  • v-enter-active：入场进行时（整个入场阶段）
  • v-enter-to：入场目标状态（动画开始后）

• 退场三连（元素移除）

• • v-leave-from：退场起始状态
  • v-leave-active：退场进行时
  • v-leave-to：退场目标状态

举个栗子：让一个div淡入淡出

<template>
  <button @click="show = !show">点击我，魔法发生！</button>
  <transition>
    <div v-if="show" class="demo-box">我会隐身术！</div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
<style>
/* 入场起始状态 */
.v-enter-from {
  opacity: 0;
}

/* 入场进行时，设置过渡效果 */
.v-enter-active {
  transition: opacity 0.5s ease;
}

/* 入场目标状态 */
.v-enter-to {
  opacity: 1;
}

/* 退场起始状态 */
.v-leave-from {
  opacity: 1;
}

/* 退场进行时 */
.v-leave-active {
  transition: opacity 0.5s ease;
}

/* 退场目标状态 */
.v-leave-to {
  opacity: 0;
}

.demo-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
</style>

这个例子中，点击按钮时，div会优雅地淡入淡出，而不是瞬间消失——从直男变成绅士的既视感。

2.2 给你的动画起个名：name属性的妙用

上面例子中，所有class都使用v-前缀。但如果有多个不同动画，就需要给它们起个专属名，避免class打架：

<transition name="fade">
  <div v-if="show" class="demo-box">我有专属动画名！</div>
</transition>

对应的CSS class就变成：

.fade-ente