具有淡入/淡出效果的上/下滑动动画答案

【问题标题】：Slide up/down animation with fadein/out effect具有淡入/淡出效果的上/下滑动动画
【发布时间】：2019-11-17 05:13:58
【问题描述】：

我已经使用 angular 6 动画实现了一个动画，动画类型是 slide up/down 以及 fading 效果，但我担心它的行为不符合预期。

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

这是它目前的样子。

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

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

总结： 用户点击cross-icon后，淡出/向下滑动动画无法正常工作 *按钮会稍微向上然后向下然后淡出，而是应该从当前位置向下。

【问题讨论】：

标签： javascript css angular animation angular6

【解决方案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

【讨论】：

看起来不错，但是当我在沙箱中添加相同的逻辑时，它的行为并不完全可以检查，这里 - codesandbox.io/s/angular-vmw5t
我的 stackblitz 使用 Angular 8 - 我认为 Angular 7 也可以工作 - 你的使用 Angular 5
那么，你能告诉我如何修复它，虽然我认为版本与它没有任何关系，即使我愿意改变我的版本。
是的，没关系，我更新了我的 stackblitz 并正常工作，但我无法让代码在代码沙箱中工作
我明白了！codesandbox.io/s/angular-60nrr。改变transition('* => void')中动画/样式的顺序，去掉背景部分