角度 4 中的动画路线

我正在尝试以角度 4 为路线过渡设置动画，动画在页面首次加载和页面刷新时起作用，所以我知道动画有效，但在我切换路线时则不然。我缺少什么？

这是代码...

// 组件元数据

animations: [fadeInAnimation]

// 模板

<div class="route-container" [@fadeInAnimation]>
    <router-outlet></router-outlet>
</div>

// 样式

.route-container {
  position:relative;
}
.route-container>* {
  display:block;
}

// 动画片

trigger('fadeInAnimation', [

    // route 'enter' transition
    transition(':enter', [

        // css styles at start of transition
        style({ opacity: 0 }),

        // animation and styles at end of transition
        animate('6s cubic-bezier(.35,0,.25,1)', style({ opacity: 1 }))
    ]),
]);

为了确保每条路线上的路由动画过程，您需要定义每条路线之间的过渡。以下是我在“home”路线和“acct”路线之间转换时用来创建抽屉效果的示例：

import { trigger, animate, style, group, query, transition } from '@angular/animations';

export const baseAnimation =
    trigger('baseAnimation', [
      transition('acct => home', [
        query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
        query(':leave', style({ height: '*'})),
        query('.acct', [
            animate('300ms',
            style({ height: 0 }))
        ])
      ]),
      transition('home => acct', [
        query(':enter, :leave',
          style({ position: 'absolute', top: 0, left: 0, right: 0 })),
        query(':enter .acct', [
          style({ height: 0 }),
          animate('300ms', style({ height: '*' }))
        ])
      ])
    ])

注意.acct指帐户页面路由的类标签，对于您的应用程序可能不是必需的（或者可能需要进行相应更改）。通过这种方式，您可以在路线更改时为每个路线的子元素设置动画。

我在我的中使用一个函数应用程序组件.html处理路线动画：

<div [@baseAnimation]="prepareRouteTransition(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>
</div>

And the 应用程序组件.ts应该加载动画并声明路线的动画：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { baseAnimation } from './anim/base.animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ baseAnimation ]
})

export class AppComponent {

  constructor() { }

  prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
  }
}