我有一个模态,它是一个位于半透明深色背景之上的白色容器。当这个模态被触发时,我希望背景淡入,然后我希望白色容器从屏幕底部向上滑动。
但是,虽然淡入有效,但向上滑动却无效。我究竟做错了什么?
模板:
<transition name="modal">
<div v-if="showModal" class="backdrop">
<transition name="content">
<div v-if="showModal" @click="showModal = false" class="container">
content
</div>
</transition>
</div>
</transition>
CSS动画:.modal-enter-active {
animation: fade-in-and-slide-up 1s;
}
.content-enter-active {
animation: wait-and-fade-in 4s;
}
@keyframes wait-and-fade-in {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in-and-slide-up {
0% {
transform: translateY(100%);
}
50% {
}
100% {
transform: translateY(0);
}
}
Codesandbox
最佳答案
要在初始渲染时启用过渡,请使用 appear
:
<transition name="modal">
<div v-if="showModal" class="backdrop">
<transition name="content" appear>
👆
demo
关于vue.js - 嵌套的 Vue 转换 : one transition works, 其他没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66933482/