Angular2 Animation Transitions 仅针对某些事件触发

Question

首先，here is a plunkr

这是从 this page transition animation example fork 出来的

基本上，我需要设置自定义状态，因为我为网站中的不同操作设置了不同的动画(例如，首次加载与应用内页面转换)。组件类具有以下代码:(home 和 about 几乎相同)

import { Component, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs';
import { routerTransition } from './router.animations';

@Component({
  selector: 'home',
  template: `<h1 [@routerTransition]="navState">Home</h1>`,
  animations: [routerTransition()]
})
export class Home implements OnDestroy{

  navState: string = 'start';
  subscribed: Subscription;
  constructor (private router: Router) {

    this.subscribed = router.events.subscribe((routerEvent) => { 

      console.log('routerEvent', routerEvent);

      if (routerEvent instanceof NavigationStart) {
        this.navState = 'start';
      }
      if (routerEvent instanceof NavigationEnd) {
        this.navState = 'end';
      }
    });
  }

  onDestroy () {

    if (this.subscribed) {
      this.subscribed.unsubscribe();
    }
  }
}

和动画:

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

export function routerTransition() {
  return slideToRight();
}

function slideToRight() {
  return trigger('routerTransition', [
    state('start', style({position:'fixed', width:'100%'}) ),
    state('end', style({position:'fixed', width:'100%'}) ),
    transition('start => end', [
      style({transform: 'translateX(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition('end => start', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
    ])
  ]);
}

如您在 plunkr 中所见，'start => end' 转换被触发并正常工作。然而，相反，'end => start' 永远不会被触发。

这是怎么回事？

非常感谢您的帮助。

Answer 1

我有一个你的 Plunkr here 的工作叉.我建议关注 this GitHub issue .

我基本上添加了:

host: {
  '[@routerTransition]': 'true',
},

到您的所有组件:home.component.ts 和 about.component.ts)。此外，将 slideToRight() 函数更改为使用状态 void 和通配符 *。