web-dev-qa-db-fra.com

Comment animer CSS Translate

Est-il possible d'animer la propriété CSS lors de la traduction via jquery?

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

et ça marche dans beaucoup de navigateurs? 

La démo ne fonctionne pas: http://jsfiddle.net/ignaciocorreia/xWCVf/

METTRE À JOUR:

Mes solutions:

  1. Implémentations simples - http://jsfiddle.net/ignaciocorreia/R3EaJ/
  2. Mise en œuvre complexe et multi-navigateur - 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

Il existe des plugins jQuery qui vous aident à atteindre cet objectif, par exemple: http://ricostacruz.com/jquery.transit/

7
flec

Il existe un moyen intéressant d'y parvenir en utilisant la méthode jQuery animate d'une manière unique: vous appelez la méthode animate sur un objet javascript qui décrit la valeur from, puis vous passez comme premier paramètre un autre objet js décrivant la valeur to et une fonction step qui gère chaque étape de l’animation en fonction des valeurs décrites précédemment.

Exemple - transformation animée 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

Selon CanIUse vous devriez l'avoir avec plusieurs préfixes.

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

Moi aussi, je cherchais un bon moyen de faire cela. J'ai trouvé que le meilleur moyen était de définir une transition sur la propriété "transform", puis de changer la transformation et de supprimer la transition.

Je mets tout cela ensemble dans un plugin jQuery 

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

Vous utiliseriez le code comme ceci:

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