1、為什麽有的人路由轉動效離場動效不生效？

自己研究發現是加動效的位置放錯了 如下：

<---! animate-state.component.html -->
<div style="background-color: antiquewhite;width: 100vw" [@trigger] id="f">
      style="background-color: antiquewhite;width: 100%;height:     100px;
</div>

//有的人可能會在組件內容的最頂層元素 加一個動效。以為這樣能達到路由轉場的效果，其實不然，因為組件本身才是這個組件的根元素。當通過路由轉場時，
//離場的根元素瞬間就隱藏了，以有其組件裏面的內容不管加什麽動效也無用，有動效，元素隱藏了也看不到啊！
// 如上面的的html 模塊名為：
 
selector: ‘app-animate-state‘，那麽<app-animate-state></app-animate-state>是根元素，動畫應該加在這樣面才會有轉場效果，而不是上面的組件內容最頂層元素

2、解決放法

　　因為路由你是沒法寫代表一個路由內容<app-animate-state></app-animate-state>這個標簽元素的。

那麽怎麽做了？如下

用 @HostBinding()綁定根元素，加上動效。

/路由切換動效如下

//animate-state.component.html
<div style="
 
background-color: antiquewhite;width: 100vw">
  style="background-color: antiquewhite;width: 100%;height: 100px;
</div>

//animate-state.component.ts

import {Component, HostBinding, OnInit} from ‘@angular/core‘;
import {trigger2} from "../animation/trigger";

@Component({
  selector: ‘app-animate-state
 
‘,
  templateUrl: ‘./animate-state.component.html‘,
  styleUrls: [‘./animate-state.component.css‘],
  animations: [trigger2]
})
export class AnimateStateComponent implements OnInit {

  constructor() { }
  @HostBinding(‘@trigger2‘) trigger2 = "";
  ngOnInit() {
  }

}

//animate-trigger.component.html
<div style="background-color: red;width: 100vw">
  [@heroState] = ‘name‘
</div>

//animate-trigger.component.ts

import {Component, HostBinding, OnInit} from ‘@angular/core‘;
import {trigger1, trigger2} from "../animation/trigger";

@Component({
  selector: ‘app-animate-trigger‘,
  templateUrl: ‘./animate-trigger.component.html‘,
  styleUrls: [‘./animate-trigger.component.css‘],
  animations: [trigger1, trigger2]
})
export class AnimateTriggerComponent implements OnInit {
  constructor() { }
  @HostBinding(‘@trigger2‘) trigger2 = "";
  ngOnInit() {
  }

}
//app.module.ts
const appRoutes: Routes = [
  { path: ‘trigger‘, component: AnimateTriggerComponent },
  { path: ‘state‘,      component: AnimateStateComponent },
  { path: ‘‘,
    redirectTo: ‘/trigger‘,
    pathMatch: ‘full‘
  },
  { path: ‘**‘, component: AnimateTriggerComponent }
];
//app.component.html

<a routerLink="/trigger" routerLinkActive="active">trigger</a>
<a routerLink="/state" routerLinkActive="active">state</a>

<div id="app">
  <router-outlet></router-outlet>
</div>

//trigger.ts 動效

export const trigger2 = trigger(‘trigger2‘, [
  transition(‘* => void‘, [style({opacity: 1,position: ‘absolute‘}),animate(1000,style({opacity: 0}))]),
  transition(‘void => *‘, [style({opacity: 0,position: ‘absolute‘}),animate(2000,style({opacity: 1}))])
]);

3、可是這樣做的話，每個路由都要這樣加，會顯的很繁瑣，在重復，有辦法一次性全加上嗎？ 當然是有 如下: 用到動效裏的query特性函數和路由中的NavigationEnd屬性 代碼如下

//animate-state.component.html
<div style="background-color: antiquewhite;width: 100vw">
  style="background-color: antiquewhite;width: 100%;height: 100px;
</div>

//animate-state.component.ts

import {Component, HostBinding, OnInit} from ‘@angular/core‘;

@Component({
  selector: ‘app-animate-state‘,
  templateUrl: ‘./animate-state.component.html‘,
  styleUrls: [‘./animate-state.component.css‘],
})
export class AnimateStateComponent implements OnInit {

  constructor() { }
  ngOnInit() {
  }

}

//animate-trigger.component.html
<div style="background-color: red;width: 100vw">
  [@heroState] = ‘name‘
</div>

//animate-trigger.component.ts

import {Component, HostBinding, OnInit} from ‘@angular/core‘;

@Component({
  selector: ‘app-animate-trigger‘,
  templateUrl: ‘./animate-trigger.component.html‘,
  styleUrls: [‘./animate-trigger.component.css‘],
})
export class AnimateTriggerComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }

}
//trigger.ts

import {
  trigger,
  state,
  style,
  animate,
  transition, query, group
} from ‘@angular/animations‘;
import {AnimationEntryMetadata} from "@angular/core";

 export const routeAnimation1: AnimationEntryMetadata = trigger(‘routeAnimation1‘, [ transition(‘* => *‘, group([ query(‘:leave‘, animate(‘.5s‘, 
style({opacity: 0,position: ‘absolute‘})), { optional: true }), query(‘:enter‘, [style({opacity: 0,position: ‘absolute‘}),
animate(‘.5s‘, style({ opacity: 1}))],{ optional: true }) ]) ) ]); 

//app.module.ts 
const appRoutes: Routes = [ { path: ‘trigger‘, component: AnimateTriggerComponent }, 
{ path: ‘state‘, component: AnimateStateComponent }, { path: ‘‘, redirectTo: ‘/trigger‘, pathMatch: ‘full‘ } ]; 

//app.component.html

 <a routerLink="/trigger" routerLinkActive="active">trigger</a>
 <a routerLink="/state" routerLinkActive="active">state</a> 
<div id="app" [@routeAnimation1]="routerStateCode"> 
　　<router-outlet>
　　</router-outlet> 
</div> 

//app.component.ts  
import { Component } from ‘@angular/core‘; import {NavigationEnd, Router} from "@angular/router";
 import { routeAnimation1} from "./animation/trigger";
 @Component({ selector: ‘app-root‘, templateUrl:
 ‘./app.component.html‘, styleUrls: [‘./app.component.css‘],
 animations: [routeAnimation1] })
 export class AppComponent {
 routerState:boolean = true;
 routerStateCode:string = ‘active‘;
 constructor(private router:Router)
{ this.router.events.subscribe(event => {
 if (event instanceof NavigationEnd) { 

// 每次路由跳轉改變狀態 
console.log(NavigationEnd,event) 

this.routerState = !this.routerState;
 this.routerStateCode = this.routerState ? ‘active‘ : ‘inactive‘; } }); } }

有問題，歡迎留言。。。

angular2中的路由轉場動效