Angular - 页面之间的动画(更改路线后)

问题描述

我还是 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)您需要为每个组件执行此操作被路由到并且您想要添加动画到:

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 放入动画中，您就可以使用 使用我上面写的 URL API.

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

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