我正在处理一个项目中,需要为一些组件添加进入和离开的动画效果。当组件进入屏幕时,它必须从底部进入,当组件离开时,它必须朝上离开。期望的行为是,当我改变组件标签的 :is 属性时,当前组件向上移动,下一个组件从底部进入。代码如下:
但实际行为是第一个组件向上移动,但第二个组件立即出现而没有动画效果。
如果我一次只渲染一个组件(不销毁一个并使用相同的操作渲染另一个),则一切都可以完美地工作。我不知道发生了什么事情。
<template>
<div class="home">
<transition name="section">
<component :is="activeSection"></component>
</transition>
</div>
</template>
<script>
import comp1 from './comp1';
import comp2 from './comp2';
export default {
components: {
comp1,
comp2
},
data() {
activeSection: 'comp1'
}
</script>
<style scoped>
.section-enter {
top: 100vh;
}
.section-enter-to {
top: 0vh;
}
.section-enter-active {
animation-name: 'slideIn';
animation-duration: 1s;
}
.section-leave {
top: 0vh;
}
.section-leave-active {
animation-name: 'slideOut';
animation-duration: 1s;
}
.section-leave-to {
top: -100vh;
}
@keyframes slideIn {
from {
top: 100vh;
}
to {
top: 0
}
}
@keyframes slideOut {
from {
top: 0vh;
}
to {
top: -100vh;
}
}
</style>
但实际行为是第一个组件向上移动,但第二个组件立即出现而没有动画效果。
如果我一次只渲染一个组件(不销毁一个并使用相同的操作渲染另一个),则一切都可以完美地工作。我不知道发生了什么事情。
appear
属性。希望这可以帮助其他遇到此问题的人! - l-portet