Angular 4同时为父级和子级组件设置动画 [英] Angular 4 animate parent and child components at the same time

问题描述

我写了简短的文章来说明我的问题: LINK

I've written plunk to illustrate my issue: LINK

我需要为父级组件设置动画，同时我想在子级组件中制作一些动画.似乎angular阻止了子组件上的动画，然后仅在父动画结束后跳过状态而没有任何过渡.

I need to animate parent component, and at the same time I want to make some animation in child component. It seems that angular is blocking animation on child component, and then simply jumps states after parent animation ends without any transition.

是否有任何方法可以使动画并行工作，或者至少在不使用回调的情况下链接动画?

Is there any way to make animations work in parallel, or at least chain without using callbacks?

@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().

I'd like to say that using callbacks is the best way to handle this for future code, but if you just need to get this to work the trick is to use OnChanges, SimpleChanges, and a setTimeout().

工作柱塞展示其工作原理以及内部div主代码更改:

Working Plunker to show how it works, as well as the inner div main changes in code:

进口

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同时为父级和子级组件设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！