Question

我已经写了插图来说明我的问题：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() {
  }
}

Answer 1

我想说使用回调是为未来代码处理此问题的最佳方式，但如果您只是需要让它工作，那么诀窍就是使用{{1 }，OnChanges和setTimeout（）。

Working Plunker显示它是如何工作的，以及代码中内部div的主要变化：

进口

SimpleChanges

模板

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'

类导出

  template: `
    <div [@stateInner]="localChange">
      <h2>Hello</h2>
    </div>

Answer 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同时激活父组件和子组件

2 个答案: