Question

我尝试使用Angular / 4在Angular 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

现在可以使用路线动画实现平滑的淡出/效果。

定义适用于它的动画和路线转换：

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包含一个有效的例子。

Answer 2

是的，起初这个很简单，有点微妙。

不要使用host组件属性。那对你没有任何帮助。

相反，您要做的是将合成属性@yourTrigger添加到要设置动画的组件的“host”元素。如果该组件的选择器在模板中写为<app-dashboard>，那么您要尝试的是添加“属性”：<app-dashboard @yourTrigger>

您可以使用@HostBinding：

在组件本身中执行此操作

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

@HostBinding设置组件主机元素的绑定。这与您在模板的CSS中使用:host解决的元素相同。

请注意，您需要组件上的animations属性和@HostBinding装饰器。 HostBinding的值应该是您在fadeInAnimation中引用的动画中使用的触发器。教程总是调用这个触发器routeAnimation，我不确定它有多特别，但它可能是一个很好的做法。

Angular / 4 - Route动画不起作用

2 个答案: