Angular2 动画 - 动画不透明度，但不是显示属性

Question

我想用 Angular2 动画显示和隐藏我的模态组件。目前这是我的代码:

animations: [
    trigger('modalState', [
      state('true', style({
        display: 'block',
        opacity: '1'
      })),
      state('false',   style({
        display: 'none',
        opacity: '0'
      })),
      transition('* => *', animate('200ms ease'))
    ])
  ]

问题:目前显示 block 设置在 200 毫秒后。所以你看不到动画的不透明度。应在事件后直接设置显示。

如何做到这一点？

Answer 1

您可以将动画钩子(Hook)用于离散的 CSS 属性，例如 display。因此，您的动画将仅包含不透明度:

animations: [
  trigger('modalState', [
    state('true', style({
      opacity: '1'
    })),
    state('false', style({
      opacity: '0'
    })),
    transition('* => *', animate('200ms ease'))
  ])
]

然后在您的模板中，您可以使用动画开始/结束 Hook 来切换显示:

<div
  [@modalState]="isShown"
  (@modalState.start)="$event.element.style.display = 'block'"
  (@modalState.done)="$event.element.style.display = ($event.toState ? 'block' : 'none')">
  ...
</div>

假设 isShown 是 bool 值。