[英]Angular 4 - event propagation in routed app between header component and routed component
[英]Angular 2 “slide in animation” of a routed component
假设我在固定导航栏中有2个路由组件和两个Routerlink来路由它们。 当我点击Routerlinks时,我希望它们从右侧滑入。
我不想用css来偏移组件,并使用超时函数来更改css类以让它滑入(例如使用ngStyle或ngClass)。
在Angular 2中有没有更优雅的方法来实现这一目标?
谢谢!
使用Angular 4.1,现在可以创建特定的路径动画。 这与显示组件时触发动画不同,因为它可以让您同时为进入/离开组件设置动画以实现平滑过渡,并允许您根据要进出的组件修改过渡。 这意味着您可以执行复杂的过渡,例如,如果您向下钻取内容,则从右侧滑动组件,如果您通过另一个组件的“后退”按钮输入,则从左侧滑入组件。
首先,像这样注释你的路由器插座(例如app.component.html
):
<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </div>
在相应的组件定义中实现prepareRouteTransition(outlet)
函数(例如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', } } }
最后,使用您定义的动画和路径元数据(例如app.component.js
)在组件上注册'routerAnimations'动画触发器:
@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 Animation API填充为目标旧浏览器
Matias Niemela在这里讨论更多关于ng-conf的路线动画(带演示): https ://youtu.be/Oh9wj-1p2BM?t = 12m21s
在滑动方面它非常简单。
您可以参考官方Angular 2 Animate文档 。
您还可以使用新的路由器v3查看我为一个简单的展示所做的Plunker
请记住,当触发元素即将从视图中销毁时,我正在努力弄清楚如何实际执行leave / exit / void转换。
我在Angular 2 Animate中打开了另一个线程- 在更改路由/组件时没有'* => void'转换的可见效果,试图弄清楚如何让路由器注意到离开动画/转换时间。
@Component({
selector: 'home',
directives: [ROUTER_DIRECTIVES],
template: `
<div @flyInOut="'active'" class="radibre">
</div>
`,
styles: ['.radibre { width: 200px; height: 100px; background: red; }'],
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
style({transform: 'translateX(-100%)'}),
animate(100)
]),
transition('* => void', [
animate(100, style({transform: 'translateX(100%)'}))
])
])
]
})
export class Home {
constructor() { }
}
@Component({
selector: 'page',
template: `
<div @testingBottom="'active'" class="page"></div>`,
styles: ['.page { width: 300px; height: 50px; background: green; }'],
animations: [
trigger('testingBottom', [
state('active', style({transform: 'scale(1)'})),
transition('void => *', [
style({transform: 'scale(0)'}),
animate(100)
]),
transition('* => void', [
animate(100, style({transform: 'scale(0)'}))
])
])
]
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.