Have different transition on enter and exit of class change

Question

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!

Answer 1

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