angular - Angular 动画在 sortablejs 之后消失了

Question

我有带有折叠动画的 Angular 组件

@Component({
  selector: 'module-result',
  templateUrl: './module-result.component.html',
  styleUrls: ['./module-result.component.scss'],
  animations: [
    trigger('collapsedState', [
      state('1', style({height: 0})),
      state('0', style({height: AUTO_STYLE})),
      transition('0 <=> 1', animate('300ms ease-in'))
    ])
  ]
})
export class ModuleResultComponent {

  public collapse = true;

  toggleCollapse() {

    this.collapse = !this.collapse;
    console.log('NEW collapse', this.collapse);

  }

}

<div>
  <div class="card">

    <div class="card-header" (click)="toggleCollapse()"></div>

    <div class="card-block">

      ...

      <div #reportContainer class="report-container">

        <div class="collapse-content" [@collapsedState]="collapse">
          ...
        </div>

      </div>
    </div>

  </div>
</div>

动画正在工作并折叠/展开 div 内容。

现在整个组件可以通过 sortablejs 进行排序。这部分也在起作用。

但是由于某种原因，在我的卡片标题上拖动排序后第一次单击以触发动画会更改布尔值collapse但不会动画。再次单击后，视图跳转到其状态并且动画过程很好。

只有第一个触发器在拖动排序更改后不起作用。