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

Question

我已经使用6个角度动画实现了一个动画，动画的类型为上/下滑动以及衰落效果，但我担心的是它的行为不符合预期。 / p>

这是相同的sandBox。 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