我写了 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>
类导出
localChange = 'narrow';
ngOnChanges( changes: SimpleChanges ) {
console.log(changes)
setTimeout( () => this.localChange = changes.stateInner.currentValue, 500);
}
关于Angular 4 同时为父组件和子组件设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46178302/