儿童的角度4动画：风格跳回来

Question

我希望通过设置其不透明度来淡出元素的子项。它工作正常，但在动画结束时，孩子的风格又恢复到原始状态（不透明度未设置）。

如何防止这种情况/如何在动画完成后告诉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

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

只需创建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>

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