特定项目的角度页面过渡动画

Edu*_*vič 5 angular-routing angular-transitions angular angular-animations angular-router

我想进行路线过渡,但不是简单的滑出/滑入动画。我正在寻找左边这样的动画(https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif

我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果(左侧的这种放大/缩放效果)。

我将不胜感激任何建议或指导在哪里寻找一些示例代码。

Tom*_*ula 1

您应该阅读可路由动画。查看 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