webentwicklung-frage-antwort-db.com.de

Wie animiere ich CSS Translate?

Ist es möglich, die CSS-Eigenschaft mit JQuery zu übersetzen?

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

und funktioniert es in vielen Browsern? 

Demo funktioniert nicht: http://jsfiddle.net/ignaciocorreia/xWCVf/

UPDATE:

Meine Lösungen:

  1. Einfache Implementierungen - http://jsfiddle.net/ignaciocorreia/R3EaJ/
  2. Komplexe Implementierung und Multi-Browser - http://ricostacruz.com/jquery.transit/
jquerycsscss3jquery-animatejquery-transit
22
Ignacio Correia
$('div').css({"-webkit-transform":"translate(100px,100px)"});​

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

6
Praveen Vijayan

Es gibt jQuery-Plugins, mit denen Sie Folgendes erreichen können: http://ricostacruz.com/jquery.transit/

7
flec

Es gibt eine interessante Möglichkeit, dies durch die Verwendung der jQuery animate-Methode auf einzigartige Weise zu erreichen, indem Sie die animate-Methode für ein Javascript-Objekt aufrufen, das den from-Wert beschreibt, und als ersten Parameter ein anderes js-Objekt übergeben, das den to-Wert beschreibt und eine step-Funktion, die jeden Schritt der Animation gemäß den zuvor beschriebenen Werten behandelt.

Beispiel - Animieren Sie die Transformation 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

Nach CanIUse sollten Sie mehrere Präfixe haben.

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

Ich suchte auch nach einem guten Weg, dies zu tun. Ich fand den besten Weg, um einen Übergang für die Eigenschaft "transform" festzulegen, die Transformation zu ändern und dann den Übergang zu entfernen.

Ich habe alles in einem jQuery-Plugin zusammengefasst 

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

Sie würden den Code folgendermaßen verwenden:

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

Sie müssen die Keyframe-Animation in Ihrem CSS einstellen. Und verwenden Sie den Keyframe mit 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