Vue3的过渡&动画

Vue3的过渡&动画

Vue3基本的过渡

<template>
  <div>
    <button @click="isShow = !isShow">显示&隐藏</button>
    <transition name="why">
      <div v-if="isShow">您好！</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style lang="scss" scoped>
.why-enter-from,
.why-leave-to {
  opacity: 0;
}
.why-enter-to,
.why-leave-from {
  opacity: 1;
}
.why-enter-active,
.why-leave-active {
  transition: all 0.3s;
}
</style>