DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Vue Transition Group: Strange Entry behaviour
James Foran
James Foran

Posted on

Vue Transition Group: Strange Entry behaviour

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Links

vue animations

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›