Angular 2 路线动画未在每个元素上执行答案

【问题标题】：Angular 2 route animation not executing on every elementAngular 2 路线动画未在每个元素上执行
【发布时间】：2018-02-12 16:34:02
【问题描述】：

我定义的组件：

@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)

【问题讨论】：

标签： angular angular2-routing angular2-animation

【解决方案1】：

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

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

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

【讨论】：