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>