Have different transition on enter and exit of class change

css, css-transitions

Solution

Just add a `margin-top` transition with a delay that lasts the duration of the other animations..

This way it will wait for the other transitions to finish and then try the `margin-top` (which you do not care about since it will already be invisible.)

.animated-container{
    /*...*/
    transition: opacity .2s, visibility .2s, margin-top 0s .2s;
}

Demo at http://codepen.io/gpetrioli/pen/xbbavJ

Problem

I have the following situation: I have an element `.animated-container` which is invisible by default. When it gets an additional `.is-visible` class the element fades in with a slight move from the top. That is fine so far. Now my problem is, that the exit animation should be without the slight move back to the top which currently leads to a jump of my element. The enter transition looks like this: ``` .is-visible { transition: opacity .2s, margin-top .4s; opacity: 1; visibility: visible; margin-top: 0; } ``` and the exit transition like this: ``` .animated-container { /* ... */ transition: opacity .2s, visibility .2s; margin-top: -60px; opacity: 0; visibility: hidden; } ``` Having my code like this makes my element jump since `margin-top` is not animated when removing the `.is-visible` class. See my current code here Thank you so much for every upcoming answer!

Original source