角度4的动画路线

我试图在角度4中设置路线过渡动画,动画在页面首次加载时起作用,在页面刷新时动画,所以我知道动画有效,但是当我切换路线时不行.我错过了什么？

这是代码……

//组件元数据

animations: [fadeInAnimation]

// tempalte

<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,.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 .acct',[
          style({ height: 0 }),animate('300ms',style({ height: '*' }))
        ])
      ])
    ])

请注意,.acct是指帐户页面路由的类标签,可能不是您的应用程序所必需的(或者可能需要相应更改).通过这种方式,您可以在路径更改时为每个路径的子元素设置动画.

我在app.component.html中使用一个函数来处理路线动画：

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

app.component.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;
  }
}