Animer l'élément transformer faire pivoter

Question

Comment pourrais-je faire pivoter un élément avec .animate() d'un 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)'
});
 

Answer 1

Autant que je sache, de base anime peut pas animer le non-numérique des propriétés CSS.

Je crois que vous pourriez obtenir ce fait à l'aide d'une étape de la fonction et le css3 transformer pour les utilisateurs du navigateur. CSS3 transformer est un peu difficile à couvrir tous vos navigateurs (IE6, vous devez utiliser la Matrice de filtre, par exemple).

EDIT: voici un exemple qui fonctionne dans les navigateurs webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

Si vous vouliez soutenir IE9 seulement, vous pouvez utiliser transform au lieu de -webkit-transformou -moz-transform serait en charge de FireFox.

Le truc est d'animer une propriété CSS nous ne nous soucions pas (text-indent), puis utiliser sa valeur en fonction de pas faire la rotation:

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

Answer 2

Ryley la réponse est génial, mais j'ai du texte dans l'élément. Afin de faire pivoter le texte et tout le reste, j'ai utilisé la frontière de l'espacement de la propriété à la place de text-indent.

Aussi, pour clarifier un peu, dans l'élément de style, mis en valeur initiale:

#foo {
    border-spacing: 0px;
}

Puis, dans les animer morceau, votre valeur finale:

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

Dans mon cas, il pivote de 90 degrés dans le sens antihoraire.

Voici la démo en live.

Answer 3

À mon avis, jQuery animate est un peu galvaudé, par rapport à l'CSS3 transition, ce qui exerce une telle animation 2D ou 3D de la propriété. Aussi, j'ai peur, que le laisser pour le navigateur et par l'oubli de la couche appelée JavaScript pourrait conduire à de rechange UC jus - et surtout, lorsque vous souhaitez souffle avec les animations. Donc, j'aime avoir des animations où les définitions de style, car vous définir les fonctionnalités JavaScript. Le plus de la présentation vous injecter dans le JavaScript, le plus de problèmes que vous devrez faire face à plus tard.

Tout ce que vous avez à faire est d'utiliser addClass par rapport à l'élément que vous souhaitez animer, où vous pouvez définir une classe qui a CSS transition propriétés. Vous avez juste à "activer" l'animation, qui reste mis en œuvre sur le pur couche de présentation.

.js

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

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

On pourrait facilement supprimer une classe avec jQuery, ou de 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'ai aussi l'utiliser quand je veux mettre en oeuvre un autre style (alternative propriétés CSS), et qui souhaitent changer de style à la volée avec un mondiale .5s animation. J'ai ajouter une nouvelle classe à l' BODY, tout en ayant alternative CSS dans un formulaire comme ceci:

.js

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

.css

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

De cette façon, vous pouvez appliquer différents style, avec des animations, sans chargement différents fichiers CSS. Vous n'impliquent JavaScript pour définir un class.

Answer 4

Pour ajouter à la réponse de Ryley et atonyc, vous n'avez pas l'utilisation d'une propriété CSS, comme text-index ou border-spacing, mais au lieu de cela, vous pouvez spécifier un faux propriété CSS, comme rotation ou my-awesome-property. Il pourrait être une bonne idée d'utiliser quelque chose qui ne risque pas de devenir un véritable propriété CSS à l'avenir.

Aussi, quelqu'un a demandé comment animer d'autres choses en même temps. Cela peut être fait comme d'habitude, mais n'oubliez pas que l' step fonction est appelée pour chaque animation de la propriété, de sorte que vous aurez à vérifier pour votre propriété, de la sorte:

$('#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)');  
            }
        }
    });

(Note: je ne peux pas trouver de la documentation pour le "Interpolation" de l'objet dans le jQuery documentation; d' animer la page de documentation il y a un lien http://api.jquery.com/Types#Tween qui est une section qui ne semble pas exister. Vous pouvez trouver le code pour l'Interpolation prototype sur Github ici).

Answer 5

Il existe un plugin jQuery qui animera les transformations CSS. Fonctionne dans Firefox, Chrome, Safari, Opera et Internet Explorer. https://github.com/puppybits/QTransform