vue transition fade

Vue的过渡效果可以使用内置的transition组件来实现。要实现淡入淡出效果，可以使用CSS中的opacity属性来控制元素的透明度。以下是一个简单的示例：

<transition name="fade">
  <div v-if="show">这是要淡入淡出的内容</div>
</transition>

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

.fade-enter, .fade-leave-to {
  opacity: 0;
}

在上面的代码中，我们使用了transition组件来包裹要进行淡入淡出的内容。name属性指定了过渡效果的名称，这里我们使用了fade。然后在CSS中定义了.fade-enter-active和.fade-leave-active类，用来控制元素的过渡动画。在.fade-enter和.fade-leave-to类中，我们将元素的opacity设为0，这样就可以实现淡出效果。

当我们要显示或隐藏内容时，只需要改变show变量的值即可，Vue会自动处理过渡效果。