Angular children 上的 4 个动画：样式向后跳

Question

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

如何避免这种情况/如何告诉 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

我找到了解决办法，实际上比我想象的要容易得多。我们根本不需要涉足 'query for children and kick off their animation' 业务。

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

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

Angular children 上的 4 个动画：样式向后跳

Angular 4 animation on children: style jumps back

angular

animation

angular-animations