Как правильно настроить перетаскивание ручки перетаскивания в Framer Motion?
Я хотел воспроизвести это руководство (https://www.youtube.com/watch?v=UMGnYRJuJog), в котором показано, как создать маркер перетаскивания во Framer X. Использованиеframer-motion
, Я думал, что это сработало, но у меня появляется дополнительное пространство при перетаскивании, чего не должно происходить. Это может быть что-то сdisplay: flex
но я не совсем уверен, делаю ли я что-то неправильно или это ошибка в framer-motion.
CodeSandbox воспроизведение
https://codesandbox.io/s/jolly-cerf-kh9o5
Действия по воспроизведению
Создайте две панели и ручку перетаскивания и сделайте так, чтобы ручка увеличивала ширину одной панели и вычитала из другой.
Ожидаемое поведение
Ручка должна тянуться и не иметь лишнего места. Он также должен следовать за мышью, чего не делает.
Воспроизведение видео
Детали окружающей среды
Windows 10, Chrome
1 ответ
Хитрость здесь в том, чтобы сначала контролировать y
положение, используя значение движения, затем используйте onPan
событие (на ручке), чтобы установить значение этого движения.
function Example() {
const containerY = useMotionValue(0)
return (
<motion.div style={{ y: containerY }}>
<motion.div onPan={(e, info) => containerY.set(info.offset.y)}>
Drag Me
</motion.div>
<div>Can't drag me</div>
</motion.div>
)
}