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() - 执行子动画

您可能注意到,此解决方案的缺点是,我分别描述了 forwardbackward 父级转换和样式,否则某些父级状态的动画效果不正确原因。 Here 是我的问题。

【讨论】:

以上是关于Angular 4同时为父组件和子组件设置动画的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 - 将子组件渲染为父组件中的内容

用于淡入和淡出视图的 Angular 4 动画

Angular 2 Dart:如何在父组件与路由器和子组件之间共享变量?

Angular 组件通信

无法将组件加载到页面中 - Angular 4/Ionic 3

使用变量 Angular 4 制作动画