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

角度材质淡入淡出过渡

1 个答案: