While working with Vue's transition-group API today I was getting a strange entry motion on an element which I was adding to a transition-group. It seemed to be entering from the top-left of the screen when the item was added, however, it would leave the screen as I was expecting it too (as per the CSS which is shown later).
The below codepen demonstrates the behaviour I was experiencing...
Hit "Pull the trigger" to see the behaviour. The second red circle flies in from the left, rather than sliding in from the right!
My CSS is set to bring the second circle in from the right, and have it leave to the right once it's removed:
.smoothFlex-enter,
.smoothFlex-leave-to {
transform: translateX(100px);
opacity: 0;
}
It appeared as if the smoothFlex-enter class was not being applied to the element at the start of the animation, causing it to fly in from afar!
On further inspection via the dev tools, I noticed that after the element had been "removed" from the list, remained with an inline style of display:none.
<div class="circle smoothFlex-enter-to smoothFlex-move" style="display: none;"></div>
The above inline Style is added by Vue when the v-show directive evaluates to false. I was hopeful now that I had found the issue... Switching to v-if resolved the issue immediately!
In the codepen above, select "fix me" to see the desired behaviour in action. This button just switches out the v-show example for a v-if example.
I hope you have found this post useful!
Head over and have a read of the Vue docs for more information on the transition-group API. It's pretty amazing, but as always, it can be quite frustrating when things don't work as expected!
Top comments (0)