角度-页面之间的动画（更改路线后） [英] Angular - Animation between pages (after changing route)

问题描述

我仍然对Angular 2还是陌生的，并且想知道在切换路线时是否有一种方法可以让一个组件飞入而让另一个组件飞出。假设我有2个组件：Test1Component和Test2Component以及指向每个组件的2条路由。最好的方法是什么？

I'm still new to Angular 2 and was wondering if there is a way to let a component 'fly in' and let another component 'fly out' when switching routes. Let's say I have 2 components: Test1Component and Test2Component and 2 routes pointing to each of them. What would be the best way to do it?

推荐答案

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

RC5有望在本周发布，如果不是下周的话。

RC5 will hopefully be out this week, if not then next week.

目前（使用RC5），您需要为
路由到的每个组件执行此操作，并且要将动画添加到：

For now (with RC5) you will need to do this for every component that is routed to and you want to add animations to:

@Component({
   host: {
     '[@routeAnimation]': 'true'
   },
   animations: [
      trigger('routeAnimation', [
         transition('* => void', animate(...)),
         transition('void => *', animate(...))
      ])
   ]
})
class Cmp { }

将 query（）和 $ variables 放入动画中，然后可以使用
< ;路由器出口t> 与我上面写的URL API。

Once we get query() and $variables into animations then you can use <router-outlet> with the URL API that I wrote above.

这篇关于角度-页面之间的动画（更改路线后）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！