Angular 2“动画中的幻灯片"路由组件的 [英] Angular 2 "slide in animation" of a routed component
问题描述
假设我在固定导航栏中有 2 个路由组件和两个 Routerlink 来路由它们.当我单击 Routerlinks 时，我希望它们从右侧滑入.
我不想用 css 偏移组件并使用超时函数来更改 css 类以使其滑入(例如使用 ngStyle 或 ngClass).
在 Angular 2 中有没有更优雅的方法可以实现这一点?
谢谢！
在 Angular 4.1 中，现在可以创建特定的路线动画.这与在显示组件时触发动画不同，因为它可以让您同时为进入/离开组件设置动画以实现平滑过渡，并让您根据进入或离开哪个组件来修改过渡.这意味着您可以进行复杂的转换，例如在深入内容时从右侧滑入一个组件，如果您通过另一个组件的后退"按钮输入内容，则从左侧滑入.
首先，像这样注释你的路由器插座(例如
app.component.html):<router-outlet #outlet="outlet"></router-outlet>在相应的组件定义(例如
app.component.js)中实现prepareRouteTransition(outlet)函数.prepareRouteTransition(outlet) {const animation = outlet.activatedRouteData['animation'] ||{};返回动画['值'] ||空值;}定义您的动画(例如
app.component.js):const slideLeft = [query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}),query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}),团体([查询(':离开'，组([animate('500ms cube-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })),//y: '-100%']), {可选:true}),查询(':输入'，组([animate('500ms 立方贝塞尔曲线(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),]), {可选:true})])]常量滑动右 = [query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}),query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}),团体([查询(':离开'，组([animate('500ms cube-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })),//y: '-100%']), {可选:true}),查询(':输入'，组([animate('500ms 立方贝塞尔曲线(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),]), {可选:true})])]将动画元数据添加到您的路由定义(例如
app.routing.ts):const 路由:路由 = [{路径:'产品'，组件:产品组件，数据: {动画片: {价值:产品"，}}},{路径:'产品/:id'，组件:ProductDetailComponent，数据: {动画片: {价值:'产品细节'，}}}最后，使用您定义的动画和路由元数据(例如
app.component.js)在您的组件上注册一个routerAnimations"动画触发器:@Component({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css'],动画:[触发器('路由器动画'，[transition('products => product-detail', slideRight),transition('product-detail => products', slideLeft),])]})
不要忘记对 Web Animation API 进行 polyfill 以针对旧浏览器
Matias Niemela 在 ng-conf 中详细介绍了路线动画(带有演示):https://youtu.be/Oh9wj-1p2BM?t=12m21s
他的演示代码:https://github.com/matsko/ng4-animations-preview
let's say I have 2 routed components and two Routerlinks in the fixed navbar to route them. I want them to slide in from the right when I click the Routerlinks.
I don't want to offset the component with css and use a timeout function to change the css class to let it slide in (e.g. with ngStyle or ngClass).
are there any more elegant ways do achieve that in Angular 2?
Thanks!
With Angular 4.1 it is now possible to create specific route animations. This is different from triggering an animation when a component is displayed because it will let you animate the entering/leaving component at the same time for a smooth transition, and let you modify the transition depending on which component is coming or going. That means you can do complex transitions like slide a component in from the right if you're drilling down into content, and slide it in from the left if you're entering it via a 'back' button from another component.
First, annotate your router outlet like so (eg.
app.component.html):<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </div>Implement the
prepareRouteTransition(outlet)function in the corresponding component definition (e.g.app.component.js).prepareRouteTransition(outlet) { const animation = outlet.activatedRouteData['animation'] || {}; return animation['value'] || null; }Define your animations (e.g.
app.component.js):const slideLeft = [ query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}), query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}), group([ query(':leave', group([ animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })), // y: '-100%' ]), {optional:true}), query(':enter', group([ animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), ]), {optional:true}) ]) ] const slideRight = [ query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}), query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}), group([ query(':leave', group([ animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })), // y: '-100%' ]), {optional:true}), query(':enter', group([ animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), ]), {optional:true}) ]) ]Add the animation metadata to your route definitions (e.g.
app.routing.ts):const routes: Routes = [ { path: 'products', component: ProductsComponent, data: { animation: { value: 'products', } } }, { path: 'products/:id', component: ProductDetailComponent, data: { animation: { value: 'product-detail', } } }Finally, register a 'routerAnimations' animation trigger on your component with the animations and route metadata you defined (e.g.
app.component.js):@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [ trigger('routerAnimations', [ transition('products => product-detail', slideRight), transition('product-detail => products', slideLeft), ]) ] })
Don't forget to polyfill the Web Animation API to target old browsers
Matias Niemela talks more about route animations at ng-conf here (with a demo): https://youtu.be/Oh9wj-1p2BM?t=12m21s
His presentation code: https://github.com/matsko/ng4-animations-preview
这篇关于Angular 2“动画中的幻灯片"路由组件的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
