vue3 transition 动画变化与示例

1，v-enter -> v-enter-from

2，v-leave -> v-leave-from

相对应的就是

v-enter-from + v-enter-to -> v-enter-active

v-leave-from + v-leave-to -> v-leave-active

<template>
  <div id="demo">
    <button @click="show = !show">Toggle</button>

    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true)
    return {
      show,
    };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-actice {
  transition: opacty 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>