CSS Переходы для быстро меняющихся позиций

Question

У меня есть несколько div s, положение которых (верхнее и левое значения) несколько меняется с помощью JavaScript. Эти изменения вступят в 1px, но я хочу, чтобы изменения были плавными - приращения 1px слишком зазубрены по моему вкусу. Я пробовал использовать переход CSS с очень коротким временем анимации (например, .1s), но он все еще несколько перегружен, и положение все равно может измениться до завершения анимации перехода.

Есть ли способ сделать эти изменения масляными?

Answer 1

Я не знаю, может ли это помочь, но я бы попытался использовать единицы «em» (instad of px), чтобы вы могли использовать значения меньше 1px (по крайней мере, он обычно работает с размером текста, например.). Кроме того, не выполняйте переходы с верхними/левыми свойствами. Вместо этого используйте translate3d> он будет выполнять ту же работу, но в целом лучше и быстрее (вызывает аппаратное ускорение). Некоторые Примеси SCSS, которые могут помочь:

@mixin single_transition($property:all, $speed:300ms, $ease:ease-out) { 
    -webkit-transition: $property $speed $ease; 
    -moz-transition: $property $speed $ease; 
    transition: $property $speed $ease; 
} 

@mixin remove_transition{ 
    -webkit-transition: none; 
    -moz-transition: none; 
    transition: none; 
} 

@mixin translate($x:0, $y:0){ 
    -webkit-transform: translate($x, $y); 
    -moz-transform: translate($x, $y); 
    -ms-transform: translate($x, $y); 
    -o-transform: translate($x, $y); 
    transform: translate($x, $y); 
} 

@mixin translate3D($x:0, $y:0, $z:0){ 
    -webkit-transform: translate3d($x, $y, $z); 
    transform: translate3d($x, $y, $z); 
} 

@mixin remove_translate{ 
    -webkit-transform: none; 
    -moz-transform: none; 
    -ms-transform: none; 
    -o-transform: none; 
    transform: none; 
} 

Обычно я применяю как переводить и translate3D, поэтому там, где будет использоваться в наличии, translate3d, в противном случае перевод. Так или иначе, translate3d в настоящее время хорошо поддерживается.

Надеюсь, это поможет!

Edit:

Если вам не удастся сделать то, что вы хотите, вы можете также попытаться получить его с какой-то библиотеки анимации. В настоящее время некоторые из лучших, которые я думаю, являются:

http://daneden.github.io/animate.css/

http://julian.com/research/velocity/

http://lvivski.com/anima/

http://greensock.com/ (платный)

Answer 2

Попробуйте использовать функцию setInterval().

Answer 3

Я предполагаю, что вы хотите контролировать top и left внутри JavaScript. Вы должны добавить transition: all в свой класс css, чтобы сменить top и left с JS и иметь эти свойства анимированными.

DEMO

Answer 4

Если приросты, что небольшие, постепенно обновлять атрибут HTML элемента style с помощью JavaScript, вместо того, чтобы полагаться на CSS переходы.

Parallax.js «Веб-страница делает это. Чтобы увидеть это в действии, откройте веб-инспектор на этой странице.

Надеюсь, это было полезно!