角/ 4 - 路線的動畫不工作

Question

我試圖用角/ 4以實現在角CLI項目路線的動畫。我一直在試圖遵循this教程，但成效有限。

我的代碼讀取

/src/app/_animations/fadein.animation.ts

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

export const fadeInAnimation = 
// trigger name for attaching this animation to an element using the 
[@triggerName] syntax 
    trigger('fadeInAnimation', [ 

     // route 'enter' transition 
     transition(':enter', [ 
     // css styles at start of transition 
     style({ opacity: 0 }), 
     // animation and styles at end of transition 
     animate('3000ms', style({ opacity: 1 })) 
    ]), 
]); 

/src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core'; 
import { SlimLoadingBarService } from 'ng2-slim-loading-bar'; 

// import fade in animation 
import { fadeInAnimation } from './../_animations/fadein.animation'; 

import { PickJob } from './../pick-jobs/pick-job'; 
import { PickJobService } from './../pick-jobs/pick-job.service'; 
import { FlashService } from './../flash/flash.service'; 

@Component({ 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'], 
    animations: [fadeInAnimation], 
    host: { '[@fadeInAnimation]': '' } 
}) 
export class DashboardComponent {} 

/src/app/dashboard/dashboard.component.html

<div class="container_flex"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="btn btn-block btn-primary block shadow"> 
       Print Next Pick Job 
      </div> 
      <a class="btn btn-block btn-danger shadow" routerLink="/pick-jobs" routerLinkActive="menu-active"> 
       List Pick Jobs 
      </a> 
      <a class="btn btn-block btn-warning shadow" routerLink="/cages/assign" routerLinkActive="menu-active"> 
       Print Pick Cage Labels 
      </a> 
     </div> 
    </div> 
</div> 

個

/src/app/app.module.ts

... 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
... 
@NgModule({ 
    imports: [  
     ... 
     BrowserAnimationsModule, 
     ... 

動畫從未運行一樣，之前已經頁面加載完成。不知道哪個。任何人都可以在我的代碼中發現錯誤？任何意見是極大的讚賞

Answer 1

呀，這是很簡單的，在第一有點微妙。

不要使用host組件屬性。這不適合你。

相反，你想要做的是綜合性能@yourTrigger添加到您想動畫組件的「主機」元素。如果該組件已被寫在一個模板<app-dashboard>選擇，那麼你正在試圖做的是增加一個「屬性」：<app-dashboard @yourTrigger>

你可以用@HostBinding爲此在組件本身：

@Component({ 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'], 
    animations: [fadeInAnimation], 
}) 
export class DashboardComponent { 
    @HostBinding('@routeAnimation') routeAnimation = true; 
} 

@HostBinding在組件的主機元素上設置綁定。這與您在模板的CSS中使用:host的地址相同。

請注意，您需要組件上的animations屬性和裝飾器的@HostBinding。 HostBinding的值應該是您在fadeInAnimation中引用的動畫中使用的觸發器。教程總是將這個觸發器稱爲routeAnimation，我不確定這有多特別，但這可能是一種很好的做法。

Answer 2

您的代碼似乎沒有錯誤，但是從你做你的儀表板組件是將淡入（沒有路由動畫）的唯一項目。您很可能看不到動畫，因爲它在應用完成加載之前就開始了。

如果你正在尋找你需要應用（確保一切點到正確的位置）路由變化添加動畫

import { fadeInAnimation } from '../_animations/index'; 

@Component({ 
    moduleId: module.id.toString(), 
    templateUrl: 'home.component.html', 
    animations: [fadeInAnimation], 
    host: { '[@fadeInAnimation]': '' } 
}) 

到被路由到每一個子組件。在您的儀表板組件中，有路由器鏈接到pick-jobs和cage/assign，因此無論哪些組件需要將上述代碼添加到component.ts文件中。

退房與你一起工作，並期待在教程演示更近的例子頁面： http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example

你的儀表板組件就相當於他的應用程序組件（用於此目的的動畫路線），不需要一個動畫（如果你這樣做，你應該添加一個約3秒左右的延遲，但它不會被推薦）。您需要將動畫應用到您的PickJob組件，這相當於他的/home/home.component.ts。將動畫導入部件添加到拾取作業組件後，只要點擊/路由到動畫組件中，就會看到淡入淡出的動畫。

Answer 3

您現在可以使用路線動畫實現平滑淡出/有效。

定義動畫和過渡路線它適用於：

const fadeIn = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0, opacity: 1 })), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, opacity: 0 })), 
    query(':leave', animate('1s', style({ opacity: 0 }))), 
    query(':enter', animate('1s', style({ opacity: 1 }))) 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    /* Allow CSS in this component to cascade down to child components */ 
    encapsulation: ViewEncapsulation.None, 
    animations: [ 
    trigger('routerAnimations', [ 
     transition('* => *', fadeIn) 
    ]) 
    ] 
}) 

標註您的路由器出口在你的模板：

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

回到你app.component.ts實現prepareRouteTransition(outlet)功能：

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

如果您想要根據哪條路線正在進行/正在進行自定義動畫，則需要向路線中添加一些元數據。查看Matias Niemela在ng-conf 2017 here的演講獲取更多信息，但his demo project包含一個工作示例。