title: Slide up/down animation with fadein/out effect
body: <p>I have implemented an animation using angular 6 animations, animation is of type <strong>slide up/down</strong> along with <strong>fading</strong> effect but my concern is it's not behaving as intended.</p>
  
  <p>Here is the sandBox for the same.
  <a href="https://codesandbox.io/s/angular-vmw5t" rel="nofollow noreferrer">https://codesandbox.io/s/angular-vmw5t</a></p>
  
  <p>Here is how it looks currently.</p>
  
  <p><a href="https://i.stack.imgur.com/o88Mi.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o88Mi.gif" alt="enter image description here"></a></p>
  
  <p>My concern here is <code>:enter</code> animation is working fine, as element appears from bottom once animation begins, but as soon as I click on the <strong>cross-icon</strong> on the <strong>top-right</strong> of button, then element goes slightly up and then fade in the <strong>bottom</strong>.</p>
  
  <p>Expected behaviour should be , as soon as <strong>cross-icon</strong> is clicked button from it's current position should go to bottom and fades, I want to eliminate this slight up movement of button as soon as I click <code>cross-icon</code>, instead it should fade to bottom from its current position.</p>
  
  <p><strong>Summary:</strong>
  Fade out / slide down animation is not working properly as soon as user clicks <code>cross-icon</code> *button goes slightly up and then goes down and then fades, instead it should go down from its current position.</p>