Utilisation de Modernizr.prefixed dans jQuery .animate

Question

Je ne suis pas doué pour la syntaxe de jQuery, car mon truc, c'est le PHP.

J'essaie de produire une animation jQuery mais avec les préfixes corrects des fournisseurs sur plusieurs valeurs, mais ma compréhension de l'utilisation de Modernizr.prefixed me laisse tomber.

Ce que j'essaie d'obtenir est quelque chose comme :

    $('.rightbox3d').animate({
        opacity: 1
        ,top:"60px"
        ,Modernizr.prefixed('transform'):"translateY(-200px)"
        ,Modernizr.prefixed('scale'):2
    }, 4000);

ie. Je veux inclure les préfixes des fournisseurs dans la liste des styles qui sont animés, mais je reçois une erreur de syntaxe - token inattendu.

J'ai essayé d'utiliser var transformProperty = Modernizr.prefixed ? Modernizr.prefixed('transform') : 'transform' ; mais cela ne permet de lister que ce seul style ie : $(".rightbox3d").animate(transformProperty, "translateY(-200px)") ; alors que ce que je veux, ce sont des styles multiples comme la transformation, l'opacité, l'échelle, etc.

Je remarque que cette ligne de code n'a pas de crochets autour de la partie transformProperty, alors que c'est le cas pour une liste par exemple. $('.rightbox3d').animate({ opacité : 1 ,top :"-200px" }, 4000, function() { // Animation terminée. }) ;

mais je n'arrive pas à m'y retrouver. Quelqu'un peut-il m'aider ?

Answer 1

Donc, vous allez devoir faire un grand saut de tête. Les transitions CSS sont différentes de jQuery.animate.

Voici une bonne introduction sur le sujet. https://www.webkit.org/blog/138/

Donc, d'abord, reconnaissons que nous ne pouvons plus faire les mêmes choses.

if (!Modernizr.csstransitions || Modernizr.csstransforms3d) {
   // use some css
} else {
   // use some jQuery
}

Maintenant, complétons avec votre exemple

if (!Modernizr.csstransitions || !Modernizr.csstransforms3d) {
  // Old jQuery version
  $('.rightbox3d').animate({
    opacity: 1,
    top: "-200px",
    width: 2 * $('.rightbox3d').width(),
    height: 2 * $('.rightbox3d').height()
  }, 4000);
} else {
  // Modern cool version
  // The transform is moving/rotating/stretching we want to do
  // The transition is the animation we want
  $('.rightbox3d').css({
    opacity: 1,
    transform: 'translateY(-200px) scale(2)',
    transition: 'all 4000ms ease-in-out'
  });
}

Je pense que cela devrait vous éclairer. :)