html v-if 加过渡动画

HTML中的`v-if`指令用于条件渲染元素，当条件为真时，该元素会被插入到DOM中；反之则被移除。为了在切换过程中添加平滑的过渡动画效果，Vue.js提供了`transition`组件配合`v-if`一起使用。

例如，你可以这样设置：

<template>
  <div id="app">
    <transition name="fade">
      <p v-if="show">这是一段动态展示的文字</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: false,
    };
  },
  // 当show变为true时，元素从无到有，opacity从0变到1，显示过渡动画；
  // 当show变为false时，元素从有到无，opacity从1变到0，隐藏过渡动画；
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

在这个例子中，`fade`是一个自定义的过渡命名空间，`.enter-active` 和 `.leave-active` 设置了进入和离开状态下的过渡动画持续时间。`enter` 和 `leave-to` 则指定了元素在开始和结束过渡过程时的样式。