Angular Material 淡入淡出过渡

Question

我关注了this answer为我的 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