Edu*_*vič 5 angular-routing angular-transitions angular angular-animations angular-router
我想进行路线过渡,但不是简单的滑出/滑入动画。我正在寻找左边这样的动画(https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif)
我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果(左侧的这种放大/缩放效果)。
我将不胜感激任何建议或指导在哪里寻找一些示例代码。
您应该阅读可路由动画。查看 Matias Niemel\xc3\xa4(负责 @angular/animations 的人)撰写的这篇博客文章。
\n\n\n\n长话短说:
\n\n<!-- app.html -->\n<div [@routeAnimation]="prepRouteState(routerOutlet)">\n <!-- make sure to keep the ="outlet" part -->\n <router-outlet #routerOutlet="outlet"></router-outlet>\n<div>\n\n\n// app.ts\n@Component({\n animations: [\n trigger(\'routeAnimation\', [\n // no need to animate anything on load\n transition(\':enter\', []),\n // but anytime a route changes let\'s animate!\n transition(\'homePage => supportPage\', [\n // ... some awesome animation here\n ]),\n // and when we go back home\n transition(\'supportPage => homePage\', [\n // ... some awesome animation here\n ])\n ])\n ] \n})\nclass AppComponent {\n prepRouteState(outlet: any) {\n return outlet.activatedRouteData[\'animation\'] || \'firstPage\'; \n }\n}\n\n<!-- app-routing.module.ts -->\nconst ROUTES = [\n { path: \'\',\n component: HomePageComponent,\n data: {\n animation: \'homePage\'\n }\n },\n { path: \'support\',\n component: SupportPageComponent,\n data: {\n animation: \'supportPage\'\n }\n }\n]\n
Run Code Online (Sandbox Code Playgroud)\n
归档时间: |
|
查看次数: |
1676 次 |
最近记录: |