角度2“动画中的幻灯片”路由组件的 [英] Angular 2 "slide in animation" of a routed component
问题描述
假设我在固定的导航栏中有2个路由组件和2个Routerlink来路由它们。我希望它们在单击Routerlinks时从右侧滑入。
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.
我不想用CSS偏移组件并使用超时功能来更改CSS
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).
在Angular 2中有没有更优雅的方法实现这一目标？
are there any more elegant ways do achieve that in Angular 2?
谢谢！
推荐答案
使用Angular 4.1，现在可以创建特定的路线动画。这与在显示组件时触发动画不同，因为它可以让您同时为进入/离开的组件设置动画，以实现平滑的过渡，并可以根据即将来临的组件来修改过渡。这意味着您可以进行复杂的过渡，例如，如果要深入查看内容，则从右侧滑动一个组件，如果要通过另一个组件的后退按钮输入它，则可以从左侧滑动一个组件。
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.
-
首先，像这样注释路由器出口（例如
app.component.html）：
<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
执行 prepareRouteTransition（outlet）在相应组件定义中的功能（例如 app.component.js ）。
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;
}
定义动画（例如 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})
])
]
添加动画您的路线定义的元数据（例如 app.routing.ts ）：
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
data: {
animation: {
value: 'products',
}
}
},
{
path: 'products/:id',
component: ProductDetailComponent,
data: {
animation: {
value: 'product-detail',
}
}
}
最后，使用您定义的动画在组件上注册一个 routerAnimations动画触发器，并路由您定义的元数据（例如 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),
])
]
})
别忘了将Web动画API填充到旧的浏览器中
Don't forget to polyfill the Web Animation API to target old browsers
Matias Niemela在ng-上详细介绍了路线动画在此处conf（带有演示）： https://youtu.be/Oh9wj-1p2BM?t=12m21s
Matias Niemela talks more about route animations at ng-conf here (with a demo): https://youtu.be/Oh9wj-1p2BM?t=12m21s
他的演示代码： https://github.com/matsko/ng4-animations-preview
这篇关于角度2“动画中的幻灯片”路由组件的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
