我写了一些插图来说明我的问题：
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',style({
height: '100px'
})),style({
height: '400px'
})),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>
班级出口
localChange = 'narrow';
ngOnChanges( changes: SimpleChanges ) {
console.log(changes)
setTimeout( () => this.localChange = changes.stateInner.currentValue,500);
}
