Angular 2 路由动画未在每个元素上执行

Question

我定义的组件：

@Component ({
        selector: 'education',
        templateUrl: './education.component.html',
        styleUrls: ['./education.component.css'],
        animations: [ fadeOutAnimation ],    
        host: {
          '[style.display]': 'block',
          '[style.position]': 'fixed',
        }
    })

    export class EducationComponent {
      @HostBinding('@routeAnimation') routeAnimation = true;
    }

是.html:

<div class="row">
        content in div
</div>
outside of div

动画：

export const fadeOutAnimation =
  trigger('routeAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      style({
        opacity: 0
      }), animate('1s', style({ opacity: 1}))
    ])
  ])

出于某种原因，动画仅在不在 div 内的 html 上执行。 <div class="row"></div> 内的内容立即出现，文本 outside of div 按预期淡入。我不知道发生了什么，我怎样才能为 div 元素内的内容设置动画？

我在桌面上使用 chrome。

Version 64.0.3282.140 (Official Build) (64-bit)

Answer 1

我对此进行了很多实验，但没有得出正确的结论，但显然这段代码现在可以工作了：

export const fadeOutAnimation =
  trigger('fadeOutAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      query('div', [
        style({ opacity: 0 }),
        stagger(75, animate(500, style({ opacity: 1 })))
      ]),
    ])
  ])

我希望我已经弄清楚其他代码有什么问题，但我花了太长时间。

Angular 2 路由动画未在每个元素上执行

Angular 2 route animation not executing on every element

angular

angular2-routing

angular2-animation