我已经实现了元素列表,可以通过Angular 材料拖放功能,如教程https://material.angular.io/cdk/drag-drop/overview
我已经实现了函数drop(event),但是在我的例子中,我不需要只是移动角模型中的元素。我需要发送请求到服务器,当服务器的响应来更新它。所以我的函数没有改变任何东西,它创建请求到服务器。
这里的问题是,由于Angular 模型在下降功能时没有改变,因此会发生元素“跳跃”:删除元素后,元素返回到原来的位置,当服务器响应时,模型更新后,元素移动到新的位置。对于用户来说,看到这一点是非常痛苦的
我想以某种方式向用户隐藏一些工作正在后台进行。
1.想法有重复的列表,这是为用户和另一个为服务器和更新他们(用户列表在下降的时刻和服务器列表在响应的时刻)我离开作为最后的决定,因为它很难维护。
我正尝试用css动画来解决这个问题。正如你在拖放示例中看到的
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
“过渡:转换”显示平滑的动画时,用户下降元素。所以我想显示用户动画约0.5秒。这段时间应该是足够的响应服务器,当动画完成模型已经更新。
我看到的是
(cdkDropListDropped)="drop($event)"
drop函数在转换结束后被调用。所以即使我转换了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的示例
1条答案
按热度按时间ukqbszuj1#
drop函数在转换结束后被调用。所以即使我转换了2000ms drop函数也会在转换结束后被调用,也就是2s后。这是预期的吗?我认为函数应该在鼠标释放后被调用。
是的,这是意料之中的。这是有技术背景的原因。
cdkDrag
创建一个拖动元素的深副本,并设置其他项目的位置。如果拖动完成(鼠标向上)动画开始,当动画完成后,Angular 将"重新选择"项目,以获得良好的过渡。否则元素将"跳跃"返回到开始顺序,然后返回到新顺序。你可以使用
cdkDragReleased
,它在动画结束前**直接触发。我想这就是你想要的。Stackblitz更新了。其他信息(容器,索引,项目)可以在
cdkDragExited
和cdkDragEntered
中找到。更多信息请参见官方文档。