web-dev-qa-db-fra.com

Animer l'élément transformer faire pivoter

Comment pourrais-je faire pivoter un élément avec un .animate() de jQuery? J'utilise la ligne ci-dessous, qui anime actuellement l'opacité correctement, mais cela prend-il en charge les transformations CSS3?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});
jquerytransform
79
kalpaitch

Autant que je sache, les animations de base ne peuvent pas animer des propriétés CSS non numériques.

Je pense que vous pourriez le faire en utilisant une fonction step et la transformation css3 appropriée pour le navigateur de l'utilisateur. La transformation CSS3 est un peu délicate à couvrir tous vos navigateurs (IE6 vous devez utiliser le filtre Matrix, par exemple).

[~ # ~] modifier [~ # ~] : voici un exemple qui fonctionne dans les navigateurs Webkit (Chrome, Safari): http: //jsfiddle.net/ryleyb/ERRmd/

Si vous vouliez supporter IE9 uniquement, vous pouvez utiliser transform au lieu de -webkit-transform, ou -moz-transform soutiendrait FireFox.

Le truc utilisé est d’animer une propriété CSS qui ne nous intéresse pas (text-indent) puis utilisez sa valeur dans une fonction step pour effectuer la rotation:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...
93
Ryley

La réponse de Ryley c'est génial, mais j'ai du texte dans l'élément. Afin de faire pivoter le texte avec tout le reste, j'ai utilisé la propriété border-spacing au lieu de text-indent.

Aussi, pour clarifier un peu, dans le style de l'élément, définissez votre valeur initiale:

#foo {
    border-spacing: 0px;
}

Ensuite, dans le morceau animé, votre valeur finale:

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

Dans mon cas, il tourne de 90 degrés dans le sens anti-horaire.

Voici la démo en direct .

75
atonyc

À mon avis, jQuery animate est un peu trop utilisé, comparé au CSS3 transition, qui exécute une telle animation sur n'importe quelle propriété 2D ou 3D. De plus, je crains que le fait de le laisser au navigateur et à en oubliant le calque appelé JavaScript pourrait entraîner des économies de temps CPU - spécialement lorsque vous souhaitez jouer avec les animations. Ainsi, j'aime bien avoir des animations où les définitions de style sont, puisque vous définissez une fonctionnalité avec JavaScript . Plus vous injectez de contenu dans JavaScript, plus vous rencontrerez de problèmes ultérieurement.

Tout ce que vous avez à faire est d'utiliser addClass pour l'élément que vous souhaitez animer, où vous définissez une classe qui possède des propriétés CSS transition. Vous venez "d'activer" l'animation , qui reste implémentée sur la couche de présentation pure .

. js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

On pourrait facilement supprimer une classe avec jQuery , ou supprimer une classe sans bibliothèque .

. css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

. html

<span id="element">
    Text
</span>

C'est une solution rapide et pratique pour la plupart des cas d'utilisation.

J'utilise également cette option lorsque je souhaite implémenter un style différent (propriétés CSS alternatives) et que je souhaite modifier le style à la volée avec une animation globale .5s. J'ajoute une nouvelle classe au BODY tout en ayant une alternative CSS sous une forme comme celle-ci:

. js

$("BODY").addClass("Alternative");

. css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

De cette façon, vous pouvez appliquer différents styles avec des animations, sans charger différents fichiers CSS. Vous utilisez uniquement JavaScript pour définir un class.

47
Dyin

Pour ajouter aux réponses de Ryley et atonyc, vous n'avez pas réellement besoin d'utiliser une vraie propriété CSS, comme text-index ou border-spacing, mais vous pouvez spécifier une fausse propriété CSS, comme rotation ou my-awesome-property. Il peut être judicieux d'utiliser quelque chose qui ne risque pas de devenir une propriété CSS réelle dans le futur.

En outre, quelqu'un a demandé comment animer d'autres choses en même temps. Cela peut être fait comme d'habitude, mais souvenez-vous que la fonction step est appelée pour chaque propriété animée. Vous devrez donc vérifier votre propriété, comme suit:

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

(Remarque: je ne trouve pas la documentation de l'objet "Tween" dans la documentation de jQuery; depuis la page de documentation animée , il existe un lien vers http: //api.jquery. com/Types # Tween qui est une section qui ne semble pas exister. Vous pouvez trouver le code du prototype Tween sur Github ici ).

17
skagedal

Il suffit d'utiliser des transitions CSS:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

Par exemple, je règle la durée de l'animation à 0,5 seconde.

Notez que setTimeout supprime la propriété transition css une fois l'animation terminée (500 ms)

Pour des raisons de lisibilité, j'ai omis les préfixes de fournisseur.

Cette solution nécessite bien entendu la prise en charge de la transition par le navigateur.

6
Paolo

Je suis tombé sur ce post, cherchant à utiliser la transformation CSS dans jQuery pour une animation en boucle infinie. Celui-ci a bien fonctionné pour moi. Je ne sais pas à quel point c'est professionnel.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

Exemple d'utilisation:

var animated = $('#elem');
progressAnim(animated)
3
Faradin
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }
1
Colin Rickels