Javascript 具有fadein/out效果的向上/向下滑动动画

我已经使用angular 6动画实现了一个动画，动画类型为向上/向下滑动以及淡入效果，但我担心的是它的行为不符合预期

这是同样的沙箱。

下面是它目前的样子

这里我关心的是

：输入
动画工作正常，因为动画开始后元素从底部显示，但只要我单击按钮右上角上的十字图标，元素就会稍微向上移动，然后在底部中淡出

预期的行为应该是，只要单击了交叉图标，按钮就会从当前位置转到底部并消失，我想在单击
交叉图标
时消除按钮的轻微向上移动，而不是从当前位置消失到底部

摘要：
当用户单击交叉图标时，淡出/向下滑动动画不能正常工作。
*按钮会稍微向上然后向下然后淡出，相反，它应该从当前位置向下移动。
类似这样的动画

  animations: [
    trigger('flyInOut', [
      state('in', style({ opacity:1,transform: 'translateY(0)' })),
      transition('void => *', [
        style({ opacity:0,transform: 'translateY(100%)' }),
        animate(200)
      ]),
      transition('* => void', [
        animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
      ])
    ])
  ]

必须使作业在.html中，如

  <button (click)="toogle=!toogle">click</button>
  <div [@flyInOut] *ngIf="toogle" >
    hello word <button (click)="toogle=false">x</button>
  </div>

点击
你好，WordX

看
看起来不错，但当我在沙箱中添加相同的逻辑时，它的行为并不完全正确。你能检查一下吗？这里-我的stackblitz使用Angular 8-我也支持Angular 7工作-你的使用Angular 5所以，你能告诉我如何修复相同的，尽管我不认为版本与之有任何关系，甚至我也愿意更改我的版本。是的，你行，我更新了我的stackblitz并正常工作，但我无法使代码在codesandboxI中工作，明白了。更改
过渡（'*=>void'）
中动画/样式的顺序，并删除背景部分