.slide-enter {
    opacity: 0;
}
.slide-enter-active {
animation: slide-in 1s ease-out forwards;
transition: opacity .5s;
}
.slide-leave {
}
.slide-leave-active {
animation: slide-out 1s ease-out forwards;
transition: opacity 1s;
opacity: 0;
/*this makes sure that other elements may move above this element while this element is still being animated*/
position: absolute;
}
@keyframes slide-in {
from {
    transform: translateY(20px);
}
to {
    transform: translateY(0);
}
}
@keyframes slide-out {
from {
    transform: translateY(0);
}
to {
    transform: translateY(20px);
}
}