CSS 同一元素上的转换属性冲突

Question

我正在设计一个 UI 允许用户拖放一个框（红色轮廓）以确定它在屏幕上的位置（黑色框）。

UI

也可以通过改变右边的输入来移动。

我正在使用 Angulars cdkDrag 来实现应用

的拖放功能

transform: translate3d(x, y, z)

移动框（我使用事件侦听器更新右侧的输入值）。

应用用户输入后，我会根据输入更新此 属性。

不幸的是，当再次拖动框时，Angular 重新应用 translate3d 创建两个相互冲突的属性，在用户输入后拖动时创建糟糕的用户体验。

two transform properties

有办法解决这个问题吗？

Answer 1

事实证明，有一种方法可以手动设置元素的拖动位置。在我的情况下，我可以根据用户输入执行此操作。

[cdkDragFreeDragPosition]="dragPosition"

dragPosition = {x: 50, y: 100};

这会保持单一翻译 属性 并创建流畅的用户体验