我想在我的Angular2应用程序中手动执行页面转换.所以我到目前为止所做的是产生了一个服务,我从一个处理导航的组件调用.当您单击某个链接,图标或我称之为AnimationService goTo方法的任何内容时.这将接收一个URL并推送到Observable流/主题.到目前为止,这是服务：
@Injectable()
export class AnimationService {
// should you be a directive?
animationStream: Subject<string> = new Subject<string>();
animationStreamEnd:Subject<string> = new Subject<string>()
constructor() {
// this is to listen for when it is time to navigate to whereever?
this.animationStreamEnd.subscribe(resp => {
// redirect the url / app here
this.router.go(resp);
});
}
goTo(url:string): void {
// so,broadcast down to trigger the css animation...
this.animationStream.next(url);
}
}
我希望动画的内容在其HTML模板中有一个ngClass条件,如[ngClass] =“{‘animate-left’：applyTransitionClass}”,它看起来像这样
<div class="gridClass" [ngClass]="{'animate-left': applyTransitionClass}">
<div class="gridRow">
<route-view></route-view>
</div>
</div>
</div>
在它的组件我有以下代码
export class AnotherComponent {
constructor(private animationService: AnimationService) {
public applyTransitionClass: boolean = false;
this.animationService.animationStream.subscribe(resp => {
// resp is a url...
// apply a css class... when that is done we need to broadcast the thing is done...
this.applyTransitionClass = true;
// here I want to listen for when the animation end (it is only 1 second) and tell the animationService to now navigate to wherever
this.animationService.animationStreamEnd.next(resp);
});
}
您可以看到我订阅Observable的位置以及我如何更改触发css动画的值.现在在Component中我希望监听我刚刚触发的css类的结束然后让AnimationService通过推送到animationStreamEnd知道这已经发生了.但是我不知道如何掌握动画结束事件(如“transitionend”,“oTransitionEnd”,“transitionend”,“webkitTransitionEnd”).我知道我可以设置1秒的延迟,但我希望这可以使用Observables.
我知道我没有很好地解释自己,如果我需要澄清要求,我会修改问题.提前致谢.
组件的视图：
原文链接：https://www.f2er.com/angularjs/142208.html<div (transitionend)="transitionEnd($event)"> ... </div>
分量码：
transitionEnd(e: Event){
alert('no way,that easy?');
}
