Attempting to implement a vue js transition from bottom to top and top to bottom. The transition works smoothly from bottom to top when entering, but there is no transition effect when leaving.
Below is the CSS code for the transition:
.slide-details-mobile-enter-active {
@include transition(all 0.5s ease-in);
}
.slide-details-mobile-enter-active {
@include transition(all 0.5s cubic-bezier(0, 1, 0.5, 1));
}
.slide-details-mobile-enter-to, .slide-details-mobile-leave {
transform: translateY(0vh);
}
.slide-details-mobile-enter, .slide-details-mobile-leave-to {
transform: translateY(100vh);
}
The Vue template structure is as follows:
<transition :name="detailsTransition">
<sc-fcst-details
v-if="viewDetails"
@changeactiveday="changeActiveFcstDay($event)">
</sc-fcst-details>
</transition>
The initial element in the Vue template has the following style properties defined in its CSS:
#fcst-details {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow-y: hidden;
z-index: 4;
}
Any insights on why the leave transition is not functioning correctly?
In addition, I attempted to use the `top` property instead of `transform`, but it did not yield the desired outcome.