用Vue2写一个过渡动画

以下是一个使用Vue2实现的简单过渡动画示例：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

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

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

首先，我们在模板中定义了一个按钮和一个过渡组件。按钮的点击事件会切换show属性的值。过渡组件中的name属性设为fade，表示使用fade这个过渡效果。

然后，在过渡组件内部，我们使用了v-if指令来控制子元素的显示和隐藏。当show为true时，子元素会被渲染出来，并且会出现一个淡入的过渡效果；当show为false时，子元素会被移除，并且会出现一个淡出的过渡效果。

最后，我们在样式中定义了fade这个过渡效果的动画样式。.fade-enter-active和.fade-leave-active表示过渡过程中的动画样式，.fade-enter和.fade-leave-to表示进入和离开的状态样式。在本例中，我们使用了opacity属性来控制元素的透明度，使其实现淡入淡出的效果。动画的时长为0.5秒。