Animation CSS3 sur la transformation: rotation. Façon d'aller chercher le deg actuel de l'élément en rotation?

Question

Je travaille sur une interface html5 qui utilise le glisser-déposer. Pendant que je fais glisser un élément, la cible obtient une classe css, ce qui la fait tourner de manière bidirectionnelle en raison d'une animation -webkit.

@-webkit-keyframes pulse { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform:rotate(-10deg); } 
    75% { -webkit-transform: rotate(10deg); } 
    100% { -webkit-transform: rotate(0deg); } 
    } 

.drag 
{ 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
} 

Lorsque je laisse tomber la cible, je veux qu'elle adopte l'état de rotation actuel. J'ai d'abord pensé à vérifier la propriété css avec jquery et la méthode .css ('- webkit-transform'). Mais cette méthode retourne juste 'none'. Donc, ma question: Y at-il un moyen d'obtenir la valeur actuelle du degré d'un élément qui est pivoté par l'animation?

Merci à ce jour Hendrik

Answer 1

J'ai récemment dû écrire une fonction qui fait exactement ce que vous voulez! N'hésitez pas à l'utiliser:

// Parameter element should be a DOM Element object. 
// Returns the rotation of the element in degrees. 
function getRotationDegrees(element) { 
    // get the computed style object for the element 
    var style = window.getComputedStyle(element); 
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)' 
    var transformString = style['-webkit-transform'] 
         || style['-moz-transform'] 
         || style['transform'] ; 
    if (!transformString || transformString == 'none') 
     return 0; 
    var splits = transformString.split(','); 
    // parse the string to get a and b 
    var parenLoc = splits[0].indexOf('('); 
    var a = parseFloat(splits[0].substr(parenLoc+1)); 
    var b = parseFloat(splits[1]); 
    // doing atan2 on b, a will give you the angle in radians 
    var rad = Math.atan2(b, a); 
    var deg = 180 * rad/Math.PI; 
    // instead of having values from -180 to 180, get 0 to 360 
    if (deg < 0) deg += 360; 
    return deg; 
} 

Hope this helps! J'ai mis à jour le code pour travailler avec les chaînes matrix3d, mais il donne seulement les degrés de rotation 2d (c'est-à-dire la rotation autour de l'axe Z).

Answer 2

window.getComputedStyle (élément, null) [ '- webkit-transform'] retournera une chaîne représentant matrice de transformation courante. Vous pouvez calculer son degré de rotation à partir de cette chaîne en l'analysant d'abord, puis en y appliquant quelques maths.