Angular 4同时为父组件和子组件设置动画
Posted
技术标签:
【中文标题】Angular 4同时为父组件和子组件设置动画【英文标题】:Angular 4 animate parent and child components at the same time 【发布时间】:2018-02-21 00:42:28 【问题描述】:我写了 plunk 来说明我的问题:LINK
我需要为父组件制作动画,同时我想在子组件中制作一些动画。似乎角度正在阻止子组件上的动画,然后在父动画结束后简单地跳转状态而没有任何过渡。
有没有什么方法可以让动画并行工作,或者至少不使用回调进行链接?
@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()
【问题讨论】:
【参考方案1】:我想说,使用回调是 为将来的代码处理此问题的最佳方法,但如果您只需要让它工作,诀窍是使用 OnChanges
, @ 987654323@,还有一个 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);
【讨论】:
【参考方案2】:您可以在没有事件和超时的情况下同时运行父动画和子动画,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() - 并行运行多个动画,这是文档中的示例
query() - 查找子动画
animateChild() - 执行子动画
您可能注意到,此解决方案的缺点是,我分别描述了 forward 和 backward 父级转换和样式,否则某些父级状态的动画效果不正确原因。 Here 是我的问题。
【讨论】:
以上是关于Angular 4同时为父组件和子组件设置动画的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 Dart:如何在父组件与路由器和子组件之间共享变量?