编辑“︁Vue.js CSS动画”︁（章节）

== 基础示例 ==
以下是一个简单的 CSS 过渡动画示例，展示如何让一个元素淡入淡出：

<syntaxhighlight lang="html">
<template>
  <button @click="show = !show">切换显示</button>
  <transition name="fade">
    <p v-if="show">这是一个动画效果示例</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

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

'''输出效果：'''
* 点击按钮时，文本会以 0.5 秒的淡入/淡出效果显示或隐藏。

'''代码解释：'''
1. `<transition name="fade">` 定义了一个名为 "fade" 的过渡效果。
2. `.fade-enter-from` 和 `.fade-leave-to` 定义了动画的起始和结束状态（透明度为 0）。
3. `.fade-enter-active` 和 `.fade-leave-active` 定义了动画的持续时间和缓动函数。