vue动画

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</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. 模板部分 (<template>):

   • 使用了一个按钮，点击按钮时会切换 show 的布尔值。
   • 使用 <transition> 标签包裹需要动画效果的元素（这里是一个段落标签 <p>），并给它添加了 name="fade" 属性。这样可以定义进入和离开的过渡类名。

2. 脚本部分 (<script>):

   • 定义了一个简单的 Vue 组件，包含一个 data 属性 show，初始值为 true。当点击按钮时，show 的值会在 true 和 false 之间切换。

3. 样式部分 (<style>):

   • 定义了 .fade-enter-active 和 .fade-leave-active 类，用于控制进入和离开动画的时间和效果。
   • 定义了 .fade-enter 和 .fade-leave-to 类，设置初始状态和结束状态的透明度，从而实现淡入淡出的效果。

这个示例展示了如何使用 Vue 的内置 <transition> 组件来创建简单的淡入淡出动画效果。