Angular Material淡入淡出过渡

Question

我按照这个答案为我的 Angular 6 + Material 应用程序创建了一个路由动画，但我将动画更改为这个：

const fade = [
// route 'enter' transition
  transition(':enter', [
    // css styles at start of transition
    style({ opacity: 0 }),
    // animation and styles at end of transition
    animate('.3s', style({ opacity: 1 }))
  ])
];

这是中的代码app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routerAnimations', [
      transition('* => *', fade)
    ])
  ]
})
export class AppComponent {
  prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
  }
}

这是 app.component.html 中的代码：

<div layout-fill layout="column" layout-align="center none">
  <div class="main-div">
      <mat-card class="z-depth center" flex="50">
        <div class="content page" [@routerAnimations]="prepareRouteTransition(outlet)">
          <router-outlet #outlet="outlet"></router-outlet>
        </div>
      </mat-card>
  </div>
</div>

现在动画不能正常工作。我检查了页面，看起来它正在尝试将不透明度应用于组件标签。我不得不说路由发生在以页面为中心的 mat-card 元素内。谢谢。

编辑：这是 Stackblitz 中的项目：https ://stackblitz.com/edit/stack-51087629

Answer 1

我用这个动画修复了它：

const fade = [
  query(':self', 
    [
      style({ opacity: 0 })
    ], 
    { optional: true }
  ),

  query(':self',
    [
      style({ opacity: 0 }),
      animate('.3s', style({ opacity: 1 }))
    ], 
    { optional: true }
  )
];

所以现在动画发生在具有 css 属性的组件的父组件中opacity。

您可以在 Stackblitz 中看到它：https://stackblitz.com/edit/stack-51087629-answer