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

问题描述

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

UI

也可以通过更改右侧的输入来移动它。

我使用 Angulars cdkDrag 来实现拖放功能

transform: translate3d(x,y,z)

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

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

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

two transform properties

有没有办法解决这个问题？

解决方法

原来，有一种方法可以手动设置元素的拖动位置。在我的情况下，我可以根据用户输入进行操作。

[cdkDragFreeDragPosition]="dragPosition"

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

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