我有这个问题很长一段时间了,无法弄清楚,想问是否可以提供帮助。不知何故,当我为它设置动画时,它的“放置区域”的位置cdkDropList
不会更新。
- 我想做的事
创建一个cdkDropList
<div>
充当容器的容器(我们称之为cdkDropList
<div>
Bin),我在其中从另一个列表中删除cdkDrag
元素(我们称之为cdkDrag
元素Item)。Bin应该在Item被拾起时飞入并在Item被丢弃时飞出(无论它是回到原来的还是Bin中)。cdkDropList
- 怎么了:
动画效果很好,但是当我将Item拖入Bin时,Bin无法识别。我所说的'不识别'的意思是没有触发BincdkDropListDropped
的功能。仅当我通过拾取和放下Item来制作动画时才会出现此问题。我还尝试使用一个按钮为Bin设置动画,单击该按钮让 bin 出现/消失,效果很好(但这不是我想要实现的方式)。
- 例子:
https://stackblitz.com/edit/angular-cvbare?file=src%2Fapp%2Fapp.component.html
在这个 Stackblitz 示例中,我重新创建了不起作用的东西,因为在没有上下文的情况下发布我的代码会太多且难以理解。
注意:在示例的控制台中,您将看到ItemDropped something
何时被放入Bin。当Item被放回或 bin 外的任何地方时,它将在控制台中打印。Dropped back
- 到目前为止我尝试了什么:
使用...
...CSS
动画而不是Angular
...ChangeDetectorRef
...Timeout
我真的被困住了,不知道如何解决这个问题,希望能得到任何建议或帮助。