est-il possible d'utiliser jQuery pour animer une webkit translate3d?
J'ai lu que lorsque vous utilisez la propriété Animate de JQuery que vous devez casser les propriétés CSS, mais dans le cas de la translate3d, cela ne semble pas fonctionner .
J'ai le code suivant que je voudrais animer au lieu de cela, il se passe juste immédiatement? pour clarification "E" est une variable qui est transmis à une fonction que mon code ci-dessus est exécuté.
3 Réponses :
Je pense que vous essayez peut-être d'animer une propriété que JQuery n'appuie pas de manière natale, votre meilleur pari est probablement d'utiliser un plugin tel que celui-ci: HTPTP://ricostacruz.com/jQuery.transit/
Au lieu d'utiliser la fonction .Nanimate, vous utiliseriez de telles suites: P>
$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
Ceci peut être fait uniquement avec JQUERY NATUREY SUPPORT. Voir Ma réponse .
@John Réponse intéressante, vous apprenez quelque chose de nouveau chaque jour +1 ;-)
Juste une note: jquery.Transit utilise des transitions CSS qui peuvent ne pas être prises en charge sur vos périphériques cible.
Utilisez un En outre, vous pouvez supprimer < un href = "http://jsfiddle.net/xxwyw/1/"> jsfiddle Pour éviter de changer de propriété utile, vous pouvez donner n'importe quelle propriété . Voir l'exemple ci-dessous: jsfiddle et parce que je suis un ventilateur Firefox, veuillez mettre en œuvre une compatibilité de Firefox Trop ajout de cette ligne, comme ici < / strong> : Texte-tiret et cela fonctionnera. Exemple: échelle (1) à partir de -webkit-transformer .
Texte-tiret ici est ce qui est animé, tirant alors le rappel à l'étape. Je suggère d'utiliser à la place opacité car il ne change pas vraiment le comportement attendu de l'animation si l'élément animé contenu d'autres éléments: jsfiddle.net/xxwyw/2
Merci de votre réponse et de votre soutien aux commentaires des gars, j'ai réussi à le faire fonctionner à l'aide de vos Jsfiddles comme base A ***
@ user2440843, vous êtes les bienvenus. Nous apprenons ici aussi, aidant les autres. :-)
Je n'ai pas pu obtenir la durée ou tarder au travail ... Avez-vous des esassons pourquoi? Voici mon code - $ ("# wheel"). Animate ({Textindent: 100}, {étape: fonction (maintenant, fx) {$ (this) .CSS ('- webkit-transformer' "," Tourner (0deg) ");}, durée: 'lent'}," swing ');
@Liamshalon Vous avez une erreur de syntaxe et vous n'utilisez pas le paramètre maintenant pour animer l'élève. Cela devrait fonctionner: $ ("# wheel"). Animate ({Textindent: 100}, {Étape: Fonction (maintenant, FX) {$ (Ceci) .CSS ('- WebKit-Transform' "," Tourner ( "+ maintenant +" deg) ");}, durée: 'lent'}," swing ');
Je ne trouve pas cette réponse suffisante car elle vous limite à utiliser text-indent . Il existe des cas où une propriété CSS qui n'est pas prise en charge de manière native doit être utilisée et ne peut être substituée à celle qui est.
@ A.Wolff Je ne comprends pas tout à fait pourquoi l'inexprimante devrait fonctionner pendant que je supprime l'inexprimante et ne fonctionne plus jamais. Pouvez-vous donner une explication profonde?
Je fais cela en animant une valeur arbitraire, puis à l'aide de l'étape code> code> pour appliquer certaines CSS que j'ai écrites dans une méthode simple. Peut-être que certains experts peuvent choisir pourquoi c'est bien ou mauvais, mais cela fonctionne pour moi et ne me forte pas à installer des plugins supplémentaires. Voici un exemple.
Dans cet exemple, j'applique une transformation 100px, puis réduisez-la à 0 à l'aide de la méthode JQuery .nanimate () Code>. P> var $elem
, applyEffect
;
$elem = $('.some_elements');
applyEffect = function ($e, v) {
$e.css({
'-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
, '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
, 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
});
};
applyEffect($elem, 100);
$elem.animate({
foo: 100
}, {
duration: 1000
, step: function (v) {
applyEffect($elem, 100 - v);
}
}
);
camelcase n'est pas indispensable lors du passage à la fonction d'animation