Javascript Girl
  1. Javascript Girl
  3. Comment combiner jQuery animé avec les propriétés css3 sans utiliser les transitions css?
Intereting Posts
Javascript url-safe filename-safe string Comment puis-je faire que TWebBrowser continue d'exécuter JavaScript après une erreur? Désactiver le tri sur la dernière colonne lors de l'utilisation de jQuery DataTables Taille de la bulle de chat Pourquoi le {position affecte ce code Javascript? JQuery: Vérifiez si la souris est sur une animation? Comment puis-je faire pivoter une image de superposition sur Google Maps? Sortie de l'intergiciel spécifique à la chaîne de route dans express / nodejs Loop est plus important que le repos? Quelle est la différence entre `before ()` et `beforeEach ()`? 'This' in function inside prototype function Y a-t-il des éditeurs HTML CSS JS hors ligne comme jsfiddle, jsbin, codepen etc.? Comment filtrer le type d'entrée = dialogue "fichier" par type de fichier spécifique? Window.location.href ne fonctionne pas sur IE Javascript var ou not var, quelle est la différence?

Comment combiner jQuery animé avec les propriétés css3 sans utiliser les transitions css?

Dans cet exemple; J'essaie de créer une animation jQuery avec css3 rotation de la propriété. Je peux gérer cette animation avec css3 transition et jQuery css() mais je veux le faire avec jQuery animate() pour la rotation de la valeur deg selon mes variétés jQuery.

Est-il possible d'utiliser animer avec la valeur de la propriété css3 avec jQuery 1.8.0?

Voici jsFiddle à inspecter.

JQuery: 

 var rotateVal = 90; //this method isn't working $('.red').animate({ 'transform':'rotate('+rotateVal+'deg)' },500); //this way works but i don't want to do this with transitions $('.black').css({ 'transform':'rotate('+rotateVal+'deg)', 'transition':'1s' });​

Html: 

 <span class="black"></span> <span class="red"></span>

Modifier: les préfixes du vendeur supprimés, comme -webkit- . Merci à Kevin B.

C'est possible, mais ce n'est pas facile. 

 var red = $(".red"), rotateVal = 90; $("<div />").animate({ height: rotateVal },{ duration: 500, step: function(now){ red.css('transform','rotate('+now+'deg)'); } });

Cela crée fondamentalement une fausse animation d'une division détachée, puis sur chaque étape, met à jour la rotation de la div cible.

Edit: Oops! Un mauvais argument d'argumentation. Voici une démo. http://jsfiddle.net/qZRdZ/

Notez qu'en 1.8.0 je ne pense pas que vous devez spécifier tous les préfixes du fournisseur.

En utilisant cette méthode, vous pouvez animer presque tout autant que vous constatez que des choses comme += et -= ne fonctionneront pas correctement, sauf si elles sont codées.

Mise à jour: voici une combinaison de ma solution et la solution de cuzzea abstraite derrière une fonction. http://jsfiddle.net/qZRdZ/206/ 

 $.fn.rotate = function(start, end, duration) { console.log(this); var _this = this; var fakeDiv = $("<div />"); _this.promise().done(function(){ _this.animate({"a":end},{duration:duration}); fakeDiv.css("height", start).animate({ height: end }, { duration: duration, step: function(now) { _this.css("transform", "rotate(" + now + "deg)"); }, complete: function() { fakeDiv.remove(); } }); }); return _this; }; var red = $('.red'); red.click(function() { if ( !$(this).is(':animated') ) { red.rotate(45,135,500); setTimeout(function(){ red.rotate(135,190,500); },750); setTimeout(function(){ red.rotate(190,45,500); },1500); } });

});

Kevin est un corect, presque. 🙂

Voici jsFiddle.

Vous ne devez pas utiliser un autre élément et une hauteur, vous pouvez faire quelque chose comme: 

 var red = $('.red'), max_rot = 45, start_from = 90; red.css({a:0}).animate( {'a':1}, { step: function(value,tweenEvent) { rotateVal = start_from + max_rot * value; red.css({ 'transform':'rotate('+rotateVal+'deg)', }); } }, 1000);​

L'idéé est simple. Tout d'abord, nous créons une propriété css bogus 'a' et la configurons à 0, puis nous l'animons à 1, donc la fonction étape vous donnera une valeur de 0 à 1 que vous pouvez utiliser pour configurer la transformation personnalisée.

Une autre méthode serait d'utiliser jQuery pour changer le dom à quelque chose auquel css répondrait.

Nous pouvons configurer notre css comme ceci: 

 .object { -webkit-transition:all .4s; -moz-transform:all .4s; -o-transform:all .4s; -ms-transform:all .4s; transform:all .4s; } .object[data-rotate="false"] { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } .object[data-rotate="true"] { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); }

Notre jQuery ressemblerait à ceci: 

 $('#trigger').live('click',function(){ if($('.object').attr('data-rotate') = true) { $('.object').attr('data-rotate',false); } else { $('.object').attr('data-rotate', true); } });

De toute évidence, le navigateur doit supporter la possibilité de transformer n'importe quelle animation que vous souhaitez exécuter, alors c'est un problème qui vous dérange en fonction du type d'animation, mais il est plus agréable de travailler si vous avez beaucoup de choses en cours ou si vous en avez une Enfants que vous souhaitez animer simultanément.

Exemple de violon: http://jsfiddle.net/ddhboy/9DHDy/1/