javascript - 带有淡入/淡出效果的向上/向下滑动动画

Question

我已经使用 angular 6 动画实现了一个动画，动画类型为上/下滑动以及淡入淡出效果，但我担心它没有按预期运行。

这是相同的沙盒。 https://codesandbox.io/s/angular-vmw5t

这是它目前的样子。

我在这里担心的是 :enter 动画工作正常，因为一旦动画开始，元素就会从底部出现，但是只要我点击 cross-icon按钮的右上，然后元素略微上升，然后淡入底部。

预期的行为应该是，一旦点击 cross-icon 按钮，它的当前位置就会降到底部并消失，我想在我点击后立即消除按钮的这种轻微向上移动十字图标，它应该从当前位置淡入底部。

总结:用户单击 cross-icon 后，淡出/向下滑动动画无法正常工作*按钮略微上升然后下降然后淡出，相反它应该从当前位置下降。

Answer 1

像这样的动画

  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>

参见 stackblitz