child : style jumps back 上的 Angular 4 动画

Question

我想通过设置不透明度动画来淡出元素的子元素。它工作正常，但在动画结束时， child 的样式恢复到其原始状态(不透明度未设置)。

如何防止这种情况发生/我如何告诉 Angular 在动画完成后将样式保留在目标状态？

这是我的代码:

@Component({
  selector: 'app-playground',
  template: `
  <div [@simpleStateTransition]="simpleState">
    {{ simpleState }}
    <div class="fadeout">fade this child out!</div>
  </div>

  <button (click)="toggleSimpleState()">toggle simple state</button>
  `,
  animations: [
    trigger('simpleStateTransition', [
      transition('initial => extended', group([
        query('.fadeout', animate('300ms', style({'opacity': '0'})))
      ])),
    ])
  ]
})
export class PlaygroundComponent {

  simpleState = 'initial'

  constructor() { }

  toggleSimpleState() {
    this.simpleState = this.simpleState === 'initial' ? 'extended' : 'initial'
  }
}

Answer 1

我找到了一个解决方案，它实际上比我想象的要容易得多。我们根本不需要进入“查询 child 并开始他们的动画”业务。

只需创建 2 个独立的动画，并从同一个表达式中触发它们。拥有单独的触发器使我们能够定义在动画完成后持续存在的开始和结束样式。

下面是一些示例代码:

@Component({
  selector: 'app-component',
  templateUrl: './your.component.html',
  animations: [
    trigger('parentAnimation', [
      state('expanded', style(styles.backgroundExtended)),
      state('compact',  style(styles.backgroundCompact)),
      transition('expanded <=> compact', animate(timings.background))
    ]),
    trigger('childAnimation', [
      state('expanded', style(styles.hideExtended)),
      state('compact',  style(styles.hideCompact)),
      transition('expanded <=> compact', animate(timings.background))
    ])
  ]
})

<div [@parentAnimation]="visualState">
    <h1>Hello from parent</h1>
    <div [@childAnimation]="visulaState">
        A Child! 
    </div>
    <div [@childAnimation]="visulaState">
        Another Child! 
    </div>
</div>

对我来说，这是非常好的/更清洁/更简单的解决方案。如果您发现任何缺点，请发表评论。