it-swarm.com.ru

Как оживить CSS-переводчик

Можно ли анимировать свойство CSS translate с помощью jquery?

$('.myButtons').animate({"transform":"translate(50px,100px)"})

и это работает во многих браузерах? 

Демо не работает: http://jsfiddle.net/ignaciocorreia/xWCVf/

Обновление:

Мои решения:

  1. Простые реализации - http://jsfiddle.net/ignaciocorreia/R3EaJ/
  2. Комплексная реализация и мульти-браузер - http://ricostacruz.com/jquery.transit/
22
Ignacio Correia
$('div').css({"-webkit-transform":"translate(100px,100px)"});​

http://jsfiddle.net/xWCVf/5/

6
Praveen Vijayan

Есть jQuery-плагины, которые помогут вам достичь этого, например: http://ricostacruz.com/jquery.transit/

7
flec

Есть интересный способ добиться этого, используя уникальный метод jQuery animate, где вы вызываете метод animate для объекта javascript, который описывает значение from, а затем передаете в качестве первого параметра другой объект js, который описывает значение to и функция step, которая обрабатывает каждый шаг анимации в соответствии со значениями, описанными ранее.

Пример - Анимированное преобразование translateY:

var $Elm = $('h1'); // element to be moved

function run( v ){
  // clone the array (before "animate()" modifies it), and reverse it
  var reversed = JSON.parse(JSON.stringify(v)).reverse();
  
  $(v[0]).animate(v[1], {
      duration: 500,
      step: function(val) {
          $Elm.css("transform", `translateY(${val}px)`); 
      },
      done: function(){
          run( reversed )
      }
  })
};

// "y" is arbitrary used as the key name 
run( [{y:0}, {y:80}] )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>jQuery animate <pre>transform:translateY()</pre></h1>

5
vsync

Согласно CanIUse у вас должно быть несколько префиксов.

$('div').css({
    "-webkit-transform":"translate(100px,100px)",
    "-ms-transform":"translate(100px,100px)",
    "transform":"translate(100px,100px)"
  });​
4
Jason Lydon

Я тоже искал хороший способ сделать это, я обнаружил, что наилучшим способом было установить переход для свойства "transform", а затем изменить преобразование и затем удалить переход.

Я положил все это вместе в плагин jQuery 

https://Gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0

Вы бы использовали код, как это:

$("#myElement").animateTransform("rotate(180deg)", 750, function(){
  console.log("animation completed after 750ms");
});
0
Dustin Poissant