Как сделать плавное перемещение объектов по странице?

Question

[Ваник Хачатрян]

Имеется квадрат, который прибавляет к своему left + 10px. При зажатии идет перемещение с рывками, как сделать плавное гладкое перемещение?
Использую vue.js, возможно у него есть свои какие то решения? Или что то свое предложите.

Comments

[Дмитрий Беляев]

допускаете использование transform translate вместо left?

[Ваник Хачатрян]

Дмитрий Беляев, сейчас попробую

Answer 1

[Александр]

CSS transform и transition вместо прямого left - будет намного плавнее

Answer 2

[Хороший UI]

https://codepen.io/you_web/pen/PexjKd

На элемент, который будет перемещаться повесить свойство transition: 0.5s , где 0.5s это время трансформации

Ваник Хачатрян, посмотрите еще раз, я изменил время на 2с и стало ну очень плавно. Если и этого недостаточно, то можно поиграться с этим - htmlbook.ru/css/transition-timing-function

Comments

[Ваник Хачатрян]

Не совсем то. Даже с transition, когда зажимаешь кнопку, то непрерывно позиция меняется, и всеравно есть рывки. А мне нужно главкое перемещение без рывков, как например в браузерных играх

[Ваник Хачатрян]

Вы не поняли.
Когда я зажимаю клавишу, происходит постоянный + 50px, то есть анимация даже сработать до конца не успевает, и все равно получаются рывки.