运行 并行查询多个动画
Run multiple query animations in parallel
我有两个路由组件及其容器,我为其设置了动画触发器,@slide
,我在其中查询每个组件并相应地设置动画。
<div [@slide]="o.activatedRouteData.name">
<router-outlet #o="outlet"></router-outlet>
<div>
RouterModule.forRoot([
{ path: '', component: HomeComponent, data: { name: 'home' } },
{ path: 'login', component: LoginComponent, data: { name: 'login' } } ])
trigger('slide', [
transition('login => home', [
query('home', style({ left: '-120%', right: '120%' })),
query('login', style({ left: '0', right: '0' })),
query('home', animate(duration, style({ left: '0', right: '0' }))),
query('login', animate(duration, style({ left: '120%', right: '-120%' })))
])
这是有效的,除了第二个动画在触发之前等待第一个动画完成,而我正在寻找的是一种让它们并行触发的方法。想法?
Ploppy3 在这里回答你:https://github.com/angular/angular/issues/9845#issuecomment-321240191 如何在初始化时为路由器制作单独的动画。
默认情况下禁用子动画,因此您只会看到路由器动画(要启用它,您可以检查 https://angular.io/api/animations/animateChild)。
所以要做你想做的事,我只需要为组件添加你需要的动画。
所以你需要像 Ploppy3 写的那样添加 routerAnimation 并使用 slide 作为组件。
将查询包装在 group()
中
trigger('slide', [
transition('login => home', [
query('home', style({ left: '-120%', right: '120%' })),
query('login', style({ left: '0', right: '0' })),
group([ query('home', animate(duration, style({ left: '0', right: '0' }))),
query('login', animate(duration, style({ left: '120%', right: '-120%' }))) ])
])
在 GitHub 上归功于 Ploppy3。
我有两个路由组件及其容器,我为其设置了动画触发器,@slide
,我在其中查询每个组件并相应地设置动画。
<div [@slide]="o.activatedRouteData.name">
<router-outlet #o="outlet"></router-outlet>
<div>
RouterModule.forRoot([
{ path: '', component: HomeComponent, data: { name: 'home' } },
{ path: 'login', component: LoginComponent, data: { name: 'login' } } ])
trigger('slide', [
transition('login => home', [
query('home', style({ left: '-120%', right: '120%' })),
query('login', style({ left: '0', right: '0' })),
query('home', animate(duration, style({ left: '0', right: '0' }))),
query('login', animate(duration, style({ left: '120%', right: '-120%' })))
])
这是有效的,除了第二个动画在触发之前等待第一个动画完成,而我正在寻找的是一种让它们并行触发的方法。想法?
Ploppy3 在这里回答你:https://github.com/angular/angular/issues/9845#issuecomment-321240191 如何在初始化时为路由器制作单独的动画。 默认情况下禁用子动画,因此您只会看到路由器动画(要启用它,您可以检查 https://angular.io/api/animations/animateChild)。 所以要做你想做的事,我只需要为组件添加你需要的动画。 所以你需要像 Ploppy3 写的那样添加 routerAnimation 并使用 slide 作为组件。
将查询包装在 group()
trigger('slide', [
transition('login => home', [
query('home', style({ left: '-120%', right: '120%' })),
query('login', style({ left: '0', right: '0' })),
group([ query('home', animate(duration, style({ left: '0', right: '0' }))),
query('login', animate(duration, style({ left: '120%', right: '-120%' }))) ])
])
在 GitHub 上归功于 Ploppy3。