我正在寻找在Angular 2 RC-6应用程序中实现漂亮页面滑动动画的可能性 . 我得到了这篇文章的例子https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm但它实现了内部转换的变化 . 我需要为路由器组件，也就是应用程序页面制作它 .
我的动画设置是下一个：
host: {
'[@routeAnimation]': 'true',
'[style.display]': "'block'",
'[class]':"'animate-jump-off'"
},
animations: [
trigger('routeAnimation', [
state('in', style({transform: 'translateX(0)'})),
transition('void => prev', [
style({transform: 'translateX(-100%)'}),
animate(300)
]),
transition('prev => void', [
animate(1000, style({transform: 'translateX(100%)'}))
]),
transition('void => next', [
style({transform: 'translateX(100%)'}),
animate(300)
]),
transition('next => void', [
animate(1000, style({transform: 'translateX(-100%)'}))
])
])
我有两个转换 - 下一个和后一个 . 要定义转换，我将变量放在模板中
<div class="card-container" [@routeAnimation] = "direction" >
并将私有变量添加到组件类 . 我决定使用EventEmitter来发出新的状态
this.emitter.subscribe(msg => {
this.direction = (msg.direction);
console.log(msg.direction);
});
在一些内部组件上，我有链接到下一页，即由 goNext() 函数启动：
emitter = EmitterService.get("direction");
goNext():void {
this.emitter.emit({'direction':'next'});
console.log('next');
setTimeout(() => {
//this.router.navigate(['/questions/1']);
}, 100)
我使用setTimeout延迟来确定，根组件将截取消息并将其方向状态切换为“next”，但它的值不适用于动画 . 同一个拦截器在下一页，所以在这个页面上方向状态也应该切换到'next' .
我现在有什么方向值正在改变，但没有动画出现（我在组件构造函数中定义direction ='none'）
请告诉我，我做错了什么，如何将方向更改应用（发送）到当前页面和下一页面，或者可能有其他方法来检测每个页面上的路由更改？
1 回答
我使用分配给路由的CanDeactivate Guard，而不是超时，在处理路由更改之前触发一个最终的更改检测周期 .
https://stackoverflow.com/a/42948545/5155810