Question

该代码目前对我有用，但是我通过反复试验并使用stagger()方法来获得此解决方案。

有没有更清洁的方法来实现这一目标？

理想情况下，我只使用*ngIf，但是元素的图像很重，并且每次渲染元素时，不透明动画在加载图像时都是不稳定的。

我最终想要完成的是：

display: none + opacity: 0 -> display block + opacity: 1;

但是我知道display不能设置动画。因此，我尝试将其更改为none之后的opacity: 0。然后在之前触发display: block，将不透明度设置为opacity: 1

trigger('fade', [
  state('hidden', style({ display: 'none', opacity: 0 })),
  state('shown', style({ display: 'block'})),
  transition('shown => hidden', [
    query(':self', [
      animate('250ms ease')
    ])
  ]),
  transition('hidden => shown', [
    query(':self', [
      animate('250ms ease'),
      stagger(250, [
        animate('250ms ease', style({ opacity: 1 }))
      ])
    ])
  ])
])

我在模板中使用以下代码调用它：

[@fade]="displayState === 'shown' ? 'shown' : 'hidden'"

角度动画和交错显示：无

0 个答案: