vue 动画

<template>
  <div id="app">
    <!-- 使用 transition 组件包裹需要动画的元素 -->
    <transition name="fade">
      <p v-if="show">Hello Vue Animation!</p>
    </transition>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

<style>
/* 定义进入和离开的动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

解释说明：

1. <transition> 组件：Vue 提供了 <transition> 组件来包裹需要添加动画效果的元素。在这个例子中，我们使用它来包裹一个 p 标签。
2. v-if 指令：用于控制元素的显示与隐藏。当 show 的值为 true 时，p 标签会显示；否则，p 标签会被移除。
3. @click 事件：绑定到按钮上，点击按钮时调用 toggle 方法，切换 show 的布尔值。
4. CSS 动画：通过定义 .fade-enter-active 和 .fade-leave-active 类来设置进入和离开时的过渡效果。.fade-enter 和 .fade-leave-to 类则定义了初始和结束状态。

这样，当点击按钮时，p 标签会在显示和隐藏时有一个淡入淡出的效果。