首先,here is a plunkr
this page transition animation example分叉
基本上,我需要设置自定义状态,因为我对站点中的不同操作有不同的动画(例如,应用程序中的首次加载与页面转换)。组件类有以下代码:(homeabout几乎相同)

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'永远不会被触发。
怎么回事?
非常感谢你的帮助。

最佳答案

我有你的工作叉。我建议遵循Plunkr here
我基本上补充道:

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

所有组件:home.component.tsabout.component.ts)。此外,将slideToRight()函数更改为使用statesvoid和wildcard*

关于angular - Angular2动画过渡仅针对某些事件触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41731280/

10-11 23:24
查看更多