时间戳

首页 > 解决方案 > 角度动画和惊人的显示：无

angular - 角度动画和惊人的显示：无

问题描述

这段代码目前正在为我工​​作，但我通过反复试验和使用该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'"

标签： angularangular-animations

解决方案

推荐阅读