首先,here is a plunkr
从this page transition animation example分叉
基本上,我需要设置自定义状态,因为我对站点中的不同操作有不同的动画(例如,应用程序中的首次加载与页面转换)。组件类有以下代码:(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'
永远不会被触发。怎么回事?
非常感谢你的帮助。
最佳答案
我有你的工作叉。我建议遵循Plunkr here。
我基本上补充道:
host: {
'[@routerTransition]': 'true',
},
所有组件:
home.component.ts
和about.component.ts
)。此外,将slideToRight()
函数更改为使用statesvoid
和wildcard*
。关于angular - Angular2动画过渡仅针对某些事件触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41731280/