见代码，(先忽略事件钩子函数)，我用css实现了一个动画效果，在不添加 mode="out-in"，两句话的进场和出场是同时进行的，因此我添加了mode="out-in"，最终效果是：先出场，完毕再进场。 现在我想用事件函数实现相同效果。 问题来了： 1、不能加mode 加了就报错，是通过事件钩子实现动画时不能加还是我写错哪里了？ 2、只看到进场效果，实现不了css那种效果，leave里面不调用done倒是可以看到，但是vue不会销毁它。怎么实现相同效果？
<template>
<div>
<Transition
appear
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
:css="false"
>
<p v-if="show">welcome</p>
<p v-else>goodbye</p>
</Transition>
<button @click="toggle">{{ show ? "再见" : "欢迎" }}</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const show = ref(true);
const toggle = () => {
show.value = !show.value;
};
const beforeEnter = (el) => {
console.log("before enter");
el.style.opacity = 0;
el.style.transform = "translateX(100px)";
};
const enter = (el, done) => {
console.log("enter");
el.offsetWidth
el.style.opacity = 1;
el.style.transform = "translateX(0)";
el.style.transition = "all 2s ease";
};
const beforeLeave = (el) => {
console.log("before leave");
el.style.opacity = 1;
el.style.transform = "translateX(0)";
};
const leave = (el, done) => {
el.offsetWidth
console.log("leave");
el.style.opacity = 0;
el.style.transform = "translateX(100px)";
el.style.transition = "all 2s ease";
done();
};
</script>
<style>
@keyframes fade-in {
from {
transform: translateX(100px);
}
to {
transform: translateX(0);
}
}
@keyframes fade-out {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-active{
transition: opacity 2s ease;
animation: fade-in 2s ease;
}
.v-leave-active {
transition: opacity 2s ease;
animation: fade-out 2s ease;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
</style>
