角色动画在sortablejs之后消失

Question

我有一个带有折叠动画的角度组件

@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内容。

现在整个Component可以通过sortablejs进行排序。这部分也在发挥作用。

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

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