v-show transition用法

`v-show` 和 `transition` 是 Vue.js 中常用的两个指令，它们通常一起用于实现元素的动态显示与隐藏效果，尤其是当涉及到平滑过渡动画时。

`v-show` 用于条件控制元素的可见性。当你给一个元素加上 `v-show="expression"`，元素会在 `expression` 的值为 `true` 时显示，`false` 时隐藏。然而，它并没有提供动画效果，切换时会有突然的切换。

`transition` 则是一个自定义组件，用于添加 CSS 过渡效果到 Vue 元素。当你将 `transition` 组件应用到需要动画的元素上，并设置其属性如 `name`（对应预先定义好的 CSS 类名），Vue 就会在元素显示或隐藏时触发相应的 CSS 动画。

例如：

<template>
  <div>
    <button @click="toggle">点击切换</button>
    <p v-show="show" :class="{ fade-in: showTransition }">
      显示内容
    </p>
    <transition name="fade">
      <p v-if="!show">隐藏内容</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showTransition: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
      // 如果你想添加动画过渡效果，可以这样设置
      if (this.show) {
        this.showTransition = true; // 开始过渡
        setTimeout(() => {
          this.showTransition = false; // 结束过渡后恢复原状
        }, 500); // 动画持续时间，这里设置为500ms
      }
    }
  }
};
</script>

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

在这个例子中，点击按钮后，文字会先消失并等待半秒后再完全消失，这就是通过 `v-show` 和 `transition` 实现的渐入渐出效果。