Question

我还是Angular 2的新手，并且想知道是否有办法让一个组件'飞入'并让另一个组件在切换路径时“飞出”。假设我有2个组件：Test1Component和Test2Component以及指向每个组件的2个路由。最好的方法是什么？

Answer 1

https://github.com/angular/angular/issues/9845#issuecomment-235799008

RC5本周有望出局，如果没有，那么下周。

目前（使用RC5）您需要为每个组件执行此操作   被路由到并且您想要添加动画：
@Component({
   host: {
     '[@routeAnimation]': 'true'
   },
   animations: [
      trigger('routeAnimation', [
         transition('* => void', animate(...)),
         transition('void => *', animate(...))
      ])
   ]
})
class Cmp { }
一旦我们将query()和$variables放入动画中，您就可以使用 <router-outlet>使用我上面写的URL API。

Answer 2

我发现了一篇很棒的文章，关于在角度为4.2及以上的路线中制作动画。

https://alligator.io/angular/animating-route-changes/?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_223

Angular - 页面之间的动画（更改路径后）

2 个答案: