角/ 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包含一个工作示例。