如何用vue写一个div淡出消失的动画

你可以使用Vue的transition组件来实现这个效果。具体实现步骤如下：

1. 在Vue组件中，使用`<transition>`标签包裹需要添加动画效果的元素。
2. 在`<transition>`标签中，使用`name`属性定义动画的名字，比如`name="fade"`。
3. 定义CSS样式，控制元素的淡入淡出效果。可以使用Vue提供的预定义类名，比如`.fade-enter-active`、`.fade-leave-active`等，也可以自定义类名。
4. 当元素需要淡出时，可以使用Vue提供的`v-if`或`v-show`指令来控制元素的显示与隐藏。

下面是一个简单的示例代码：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <div v-show="show">Hello, world!</div>
    </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 {
  opacity: 0;
}
</style>

这个示例中，点击按钮可以控制文本的显示与隐藏，并添加淡出效果。`name="fade"`定义了动画的名字，CSS样式中`.fade-enter-active`和`.fade-leave-active`分别定义了元素进入和离开时的动画效果，`.fade-enter`和`.fade-leave-to`分别定义了元素进入和离开时的起始和结束状态。