More complicated Leave animations in VueJS

I’ve been working with Vue for a few months now and I love the ease with which you can work css animations into it. However, when it came to creating an animation with two elements leaving the dom at the same time, I was stuck. I could also not find much help inline, so once I figured out a way, I thought I’d document it.

The trick is, basically, that when you want two elements to leave the dom at the same time, there has to be a containing element as well. It will also leave the dom. Unfortunately, once it has left the dom, the child elements (the ones you’re really interested in) will be gone as well. This means no fading or moving to the side or anything. Something that isn’t there will not show up as animating – bugger.

For this reason Vue has introduced the ‘duration’ prop. Here is some basic example vue template code:
<template>
<transition name="modal-main" :duration="500" >

    <transition-group name="modal-in-out" appear >

      <div class="class1"></div>

      <div class="class2"></div>

   </transition-group>

</transition>
</template>

The outside ’transition’ tag is for the containing element. The duration of 500 means that it will stay in the DOM for 500 ms after it’s been given the signal to leave.

This gives the ’transition-group’ the time to manage the two transitions on the two enclosed divs in there. In VueJS you need transition-group if you want to manage more than one animation at once.

To make it more complete, here are some animations you might want to use:

.modal-main-leave-active .class1 {

animation: fadeout 550ms cubic-bezier(0.605, 0.09, 0.37, 0.9);

}
.modal-main-leave-active .class2 {
animation: slideout 550ms cubic-bezier(0.605, 0.09, 0.37, 0.9);
}


@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}


@keyframes slideout {
0% {
margin-left: 0%;
}
100% {
margin-left: 100%;
}
}

Note that while the ‘duration’ of the main transition is 500ms, the css animations are 550ms. The extra 50ms prevent a weird flickering effect at the end of the leave animation. Basically it means that the element will (for some reason) come back in the dom right after the animation stopped. By making sure that the containing element has left the DOM, I’m also making sure that the flickering doesn’t show. It’s a bit hacky, but it works.

Geef een reactie

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.