web-dev-qa-db-ja.com

CSS Translateをアニメーション化する方法

Jqueryを介してCSSプロパティの翻訳をアニメーション化することは可能ですか？

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

そして、それは多くのブラウザで動作しますか？

デモが機能しない： http://jsfiddle.net/ignaciocorreia/xWCVf/

UPDATE：

私のソリューション：

  1. シンプルな実装- http://jsfiddle.net/ignaciocorreia/R3EaJ/
  2. 複雑な実装とマルチブラウザ- http://ricostacruz.com/jquery.transit/
jquerycsscss3jquery-animatejquery-transit
24
Ignacio Correia
$('div').css({"-webkit-transform":"translate(100px,100px)"});​

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

7
Praveen Vijayan

これを達成するのに役立つjQueryプラグインがあります。 http://ricostacruz.com/jquery.transit/

7
flec

ユニークな方法でjQuery animateメソッドを使用することでこれを実現できる興味深い方法があります。この場合、animate値を記述するjavascriptオブジェクトでfromメソッドを呼び出し、次に、最初のパラメーターとして、to値を記述する別のjsオブジェクトと、前述の値に従ってアニメーションの各ステップを処理する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/8a4837c476e3939a5b3d1a2585e8d1b

次のようなコードを使用します。

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

CSSでキーフレームアニメーションを設定する必要があります。そして、jQueryでキーフレームを使用します。

$('#myTest').css({"animation":"my-animation 2s infinite"});
#myTest {
  width: 50px;
  height: 50px;
  background: black;
}

@keyframes my-animation {
  0% {
    background: red;  
  }
  50% {
    background: blue;  
  }
  100% {
    background: green;  
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTest"></div>
0
Guilherme IA