I am currently involved in a project where I need to implement enter and exit animations for some components. When a component enters the screen, it should come from the bottom, and when it leaves, it should go upwards. The intended functionality is that when I change the :is property of the component tag, the current component moves upwards while the next one comes from the bottom. Here is a snippet of the code:
<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>
However, the issue I'm facing is that the first component slides upwards, but the second one appears immediately without any animation.
If I render one component at a time (rather than replacing one with another using the same action), everything works perfectly fine. I am perplexed about what might be causing this inconsistency in behavior.