Angular 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'
  }
}

- Hoff

---

我对动画不是很了解，但你可以尝试使用ngAfterViewInit，因为这是视图渲染完成的时候。这只是一个想法。 - Aniruddha Das

Answer 1

我找到了一个解决方案，它比我想象的要简单得多。我们根本不需要涉及“查询子元素并启动它们的动画”业务。

只需创建两个独立的动画，并从同一表达式触发它们。具有独立触发器可以让我们定义开始和结束样式，在动画完成后仍然保持不变。

以下是一些示例代码：

@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>

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

- Hoff

---

@M98 我觉得你的意思是交错。 - Simon_Weaver

是的。请原谅我的打字错误。 - Mohammad Kermani