使用Vue和CSS实现过渡动画

Vue提供了过渡系统，可以通过CSS或JavaScript实现过渡动画。

下面是一个使用CSS实现过渡动画的例子：

1. 在Vue组件中，使用`<transition>`标签包裹需要过渡的元素。

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

2. 在CSS中定义过渡的样式，例如下面的例子定义了一个淡入淡出的过渡效果：

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

3. 在Vue组件中，定义`show`变量并在`toggle`方法中切换`show`变量的值，即可触发过渡效果。

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

完整代码如下：

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

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

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