css 过渡结束后角度材质拖放调用回调

Question

我已经实现了可以通过角度材料拖放功能拖放的元素列表 就像在教程https://material.angular.io/cdk/drag-drop/overview

我已经实现了函数 drop(event) 但是在我的例子中我不仅需要移动角度模型中的元素。我需要向服务器发送请求，当服务器响应时更新它。所以我的功能没有改变任何东西，它创建了对服务器的请求。

这里的问题是，因为角度模型在 drop 函数中没有改变，所以会发生元素“跳跃”：在元素 drop 元素返回到它原来的位置之后，当来自服务器的响应到来并且模型被更新时，元素移动到新位置。对于用户来说，看到它是非常痛苦的

我想以某种方式向用户隐藏某些工作正在后台进行。

1. 有一个用于用户的重复列表和另一个用于服务器的列表并更新它们的想法（删除时的用户列表和响应时的服务器列表）我留作最后决定，因为它很难维护。

   我试图用 css 动画来解决它。正如您在拖放示例中看到的那样，它使用

   .cdk-drag-animating {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
   

   “transition: transform” 在用户放下元素时显示流畅的动画。所以我想展示大约 0.5 秒的用户动画。这个时间应该足以让服务器响应，并且当动画完成时模型已经更新。

   我看到的是

   (cdkDropListDropped)="drop($event)"
   

   drop 函数在过渡结束后被调用。所以即使我做 transform 2000ms drop 函数也会在转换结束后被调用，所以在 2s 之后。是预期的吗？我认为应该在鼠标释放后调用函数。

   你对最初的问题（隐藏模型更新）有什么想法，特别是这个 css 动画过渡问题吗？

   更新： 我已经创建了我的问题的例子 https://stackblitz.com/edit/angular-3nhsxx?file=src%2Fapp%2Fcdk-drag-drop-disabled-sorting-example.css,src%2Fapp%2Fcdk-drag-drop-disabled-sorting-example.ts

Answer 1

drop 函数在转换结束后被调用。所以即使我做 transform 2000ms drop 函数也会在转换结束后被调用，所以在 2s 之后。是预期的吗？我认为应该在鼠标释放后调用函数。

是的，这是意料之中的。这样做的原因具有技术背景。 cdkDrag 创建被拖动元素的深拷贝并设置其他项目的位置固定位置。如果拖动完成（鼠标向上）动画开始，并且首先当动画完成时 Angular 将“重新排列”项目以获得良好的过渡。否则，元素将“跳”回开始顺序，然后再跳到新顺序。

您可以使用直接触发的cdkDragReleased前动画结束。我想这就是你想要的。 Stackblitz 已更新。

附加信息（容器、索引、项目）可以在cdkDragExited 和cdkDragEntered 中找到，例如。更多在官方docs。

演示：

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>

    <div
      cdkDropList
      id="test"
      [cdkDropListData]="items"
      class="example-list"
      cdkDropListSortingDisabled
      (cdkDropListDropped)="drop($event)"
>
      <div class="example-box" *ngFor="let item of items" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>Shopping basket</h2>

    <div
    id="super"
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      >
      <div class="example-box" *ngFor="let item of basket" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

代码

dragEnd(event: any) {
    console.log('End', event);
  }

  cdkDropListEntered(event: any) {
    console.log(event);
  }

  cdkDropListExited(event: any) {
    console.log(event);
  }