vue 显示隐藏加动画

Vue 是一款 JavaScript 框架，可以帮助开发者更方便地构建用户界面。如果您想实现 Vue 组件的显示隐藏以及加动画效果，可以使用 Vue 内置的过渡系统。

您可以在 Vue 组件中通过 v-if 指令控制元素的显示隐藏，并在该元素上添加 transition 组件实现动画效果。

以下是一个示例代码：

<template>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
.fade-enter, .fade-leave-to {
  opacity: 0;
</style>
<script>
export default {
  data() {
    return {
      show: true
</script>
在上面的代码中，我们通过点击按钮动态控制 show 变量的值来控制元素的显示隐藏，并通过 transition 组件以及 CSS 样式实现动画效果。