在路由事件上向路由组件添加动画

Question

我试图这样做，当用户切换标签时，它会在它们之间滑动。

我正在使用animate.css和Angular2的第4版。

我检测到路由器更改并添加如下动画：

    this.router.events.pairwise().filter((e) => e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart).subscribe((e: [NavigationStart, NavigationEnd]) => {
            $("#home").addClass("animated slideOutRight").one("animationend", function() {
                $(this).removeClass("animated slideOutRight");
            })
            $("#about").addClass("animated slideInLeft").one("animationend", function() {
                $(this).removeClass("animated slideInLeft");
            })
    });

其中#home和#about是要路由到的组件。这两个id用于覆盖HomeComponent和AboutComponent。

  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },

当使用不在<router-outlet>中的内容时（例如使用$("body")时），动画会起作用，所以我猜我需要对路由器组件采取不同的做法。