title: Have different transition on enter and exit of class change
body: <p>I have the following situation: I have an element <code>.animated-container</code> which is invisible by default. When it gets an additional <code>.is-visible</code> 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.</p>
  
  <p>The enter transition looks like this:</p>
  
  <pre><code>.is-visible {
    transition: opacity .2s, margin-top .4s;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
  </code></pre>
  
  <p>and the exit transition like this:</p>
  
  <pre><code>.animated-container {
    /* ... */
    transition: opacity .2s, visibility .2s;
    margin-top: -60px;
    opacity: 0;
    visibility: hidden;
  }
  </code></pre>
  
  <p>Having my code like this makes my element jump since <code>margin-top</code> is not animated when removing the <code>.is-visible</code> class.</p>
  
  <p><a href="http://codepen.io/anon/pen/yyyxrb" rel="noreferrer">See my current code here</a></p>
  
  <p>Thank you so much for every upcoming answer!</p>