Even though it seems simple, I am struggling to get it to work properly. My goal is to have the existing elements in my list shift to make room for a new element added, and then have the new element appear with a smooth fade transition.
I have tried to implement this animation but ran into some issues. While I can successfully move the other elements, the new element simply appears without the desired fade transition. It's frustrating!
If you'd like to take a look at the code, here's a link to a Codepen: https://codepen.io/MuyBien/pen/OEqNEQ
.fade-enter-active {
transition: opacity .3s ease-out;
transition-delay: .3s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform .3s;
}