Angular 4 个同时为父子组件设置动画
Angular 4 animate parent and child components at the same time
我写了 plunk 来说明我的问题:LINK
我需要给父组件做动画,同时我想给子组件做一些动画。似乎 angular 在子组件上阻塞动画,然后在父动画结束后简单地跳转状态,没有任何过渡。
有没有办法让动画并行工作,或者至少在不使用回调的情况下进行链接?
@Component({
selector: 'outer',
template: `
<div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">
<inner [stateInner]="state"></inner>
</div>`,
animations:[
trigger('state', [
state('narrow', style({
width: '100px'
})),
state('wide', style({
width: '400px'
})),
transition('* => *', animate('500ms'))
])
]
})
export class Outer {
public state: string = 'narrow';
constructor() {
}
}
@Component({
selector: 'inner',
template: `
<div [@stateInner]="stateInner">
<h2>Hello</h2>
</div>`,
animations:[
trigger('stateInner', [
state('narrow', style({
height: '100px'
})),
state('wide', style({
height: '400px'
})),
transition('* => *', animate('500ms'))
])
]
})
export class Inner {
@Input() stateInner: string = 'narrow';
constructor() {
}
}
我想说的是,使用回调是 为将来的代码处理此问题的最佳方式,但如果您只需要让它工作,技巧就是使用OnChanges
、SimpleChanges
和 setTimeout()。
Working Plunker 展示它是如何工作的,以及内部 div 代码的主要变化:
进口
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'
模板
template: `
<div [@stateInner]="localChange">
<h2>Hello</h2>
</div>
class 导出
localChange = 'narrow';
ngOnChanges( changes: SimpleChanges ) {
console.log(changes)
setTimeout( () => this.localChange = changes.stateInner.currentValue, 500);
}
你可以运行同时没有事件和超时的父子动画,animateChild()可以帮助我们。这是父动画描述:
animations: [
trigger('state', [
state('narrow', style({
width: '100px'
})),
state('wide', style({
width: '400px'
})),
transition('narrow => wide', [
style({
width: '100px'
}),
group([
animate('500ms', style({
width: '400px'
})),
query('@stateInner', [
animateChild()
])
])
]),
transition('wide => narrow', [
style({
width: '400px'
}),
group([
animate('500ms', style({
width: '100px'
})),
query('@stateInner', [
animateChild()
])
])
])
])
]
group() - 运行s 多个并行动画,这里是文档中的示例
query() - 查找子动画
animateChild() - 执行子动画
这个解决方案的缺点,你可能会注意到,我分别描述了 forward 和 backward 父转换和样式,否则父由于某种原因,状态没有正确动画。 Here是我的问题。
我写了 plunk 来说明我的问题:LINK
我需要给父组件做动画,同时我想给子组件做一些动画。似乎 angular 在子组件上阻塞动画,然后在父动画结束后简单地跳转状态,没有任何过渡。
有没有办法让动画并行工作,或者至少在不使用回调的情况下进行链接?
@Component({
selector: 'outer',
template: `
<div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">
<inner [stateInner]="state"></inner>
</div>`,
animations:[
trigger('state', [
state('narrow', style({
width: '100px'
})),
state('wide', style({
width: '400px'
})),
transition('* => *', animate('500ms'))
])
]
})
export class Outer {
public state: string = 'narrow';
constructor() {
}
}
@Component({
selector: 'inner',
template: `
<div [@stateInner]="stateInner">
<h2>Hello</h2>
</div>`,
animations:[
trigger('stateInner', [
state('narrow', style({
height: '100px'
})),
state('wide', style({
height: '400px'
})),
transition('* => *', animate('500ms'))
])
]
})
export class Inner {
@Input() stateInner: string = 'narrow';
constructor() {
}
}
我想说的是,使用回调是 为将来的代码处理此问题的最佳方式,但如果您只需要让它工作,技巧就是使用OnChanges
、SimpleChanges
和 setTimeout()。
Working Plunker 展示它是如何工作的,以及内部 div 代码的主要变化:
进口
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'
模板
template: `
<div [@stateInner]="localChange">
<h2>Hello</h2>
</div>
class 导出
localChange = 'narrow';
ngOnChanges( changes: SimpleChanges ) {
console.log(changes)
setTimeout( () => this.localChange = changes.stateInner.currentValue, 500);
}
你可以运行同时没有事件和超时的父子动画,animateChild()可以帮助我们。这是父动画描述:
animations: [
trigger('state', [
state('narrow', style({
width: '100px'
})),
state('wide', style({
width: '400px'
})),
transition('narrow => wide', [
style({
width: '100px'
}),
group([
animate('500ms', style({
width: '400px'
})),
query('@stateInner', [
animateChild()
])
])
]),
transition('wide => narrow', [
style({
width: '400px'
}),
group([
animate('500ms', style({
width: '100px'
})),
query('@stateInner', [
animateChild()
])
])
])
])
]
group() - 运行s 多个并行动画,这里是文档中的示例
query() - 查找子动画
animateChild() - 执行子动画
这个解决方案的缺点,你可能会注意到,我分别描述了 forward 和 backward 父转换和样式,否则父由于某种原因,状态没有正确动画。 Here是我的问题。