Vue动画Transition

2025-02-09 56 阅读1分钟

最简单的vue动画

模版代码

<button @click="change">切换</button>
  <transition>
    <div v-if="isVisible">
      <p>Hello</p>
    </div>
  </transition>

css代码

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

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