W jaki sposób mogę jednocześnie zastosować wiele transformacji obracania za pomocą przełączania klas?

Question

Próbuję zastosować różne transformacje do danego elementu lub zestawu elementów, klikając przyciski, aby włączać i wyłączać klasy. Działa to dla większości rzeczy, ale nie wtedy, gdy próbuję przełączać się na więcej niż jedną transformację rotacyjną. Gdy element ma dwie osobne klasy przekształcania rotacji (rotateX, rotateZ), transformacje przestają działać zgodnie z oczekiwaniami.

Proszę zobaczyć mój przykład tutaj: http://jsfiddle.net/XTVd7/9/

CSS

#box { 
    width: 100px; 
    height: 100px; 
    border: 1px solid blue; 
    transition: all 1s; 
} 

.flip { 
    -webkit-transform: rotateX(360deg); 
    -moz-transform: rotateX(360deg); 
    -ms-transform: rotateX(360deg); 
    -o-transform: rotateX(360deg); 
} 

.spin { 
    -webkit-transform: rotateZ(360deg); 
    -moz-transform: rotateZ(360deg); 
    -ms-transform: rotateZ(360deg); 
    -o-transform: rotateZ(360deg); 
} 

jQuery

$("#flipBtn").on("click", function() { 
    $("#box").toggleClass("flip"); 
}); 

$("#spinBtn").on("click", function() { 
    $("#box").toggleClass("spin"); 
}); 

będę oczekiwać, że mogę odwrócić lub wirowania pola w każdej chwili przez włączanie lub wyłączanie dowolnej z tych klas. Nie dotyczy to sytuacji, gdy obie klasy zostały do ​​niej dodane.

Answer 1

Jeśli chcesz przełączać wiele wartości dla tej samej nieruchomości, trzeba ręcznie skonstruować tekst posesji (fiddle):

function createToggleFunction(element$) { 
    var transforms = { 
     flip: 'rotateX(120deg)', 
     spin: 'rotateZ(180deg)', 
    }; 

    var state = {}; 

    return function(transform) { 
     state[transform] ^= true; 
     var text = ""; 
     for(var key in transforms) { 
      if(state[key]) text += transforms[key] + ' '; 
     } 
     element$.css('transform', text); 
    }; 
} 

var toggle = createToggleFunction($('#box')); 

$("#flipBtn").on("click", function() { 
    toggle('flip'); 
}); 

$("#spinBtn").on("click", function() { 
    toggle('spin'); 
}); 

Prostszym rozwiązaniem byłoby mieć dwie zagnieżdżone elementy do reprezentowania „okno ”jeden przemian zastosowanie do zewnętrznej jednej i stosując do komory wewnętrznej:

(patrz this edited version of jblasco's fiddle)

#spinner { 
    width: 100px; 
    height: 100px; 
    transition: all 1s; 
} 

#flipper { 
    width: 100%; 
    height: 100%; 
    transition: all 1s; 
    border: 1px solid blue; 
} 

HTML:

<div id="spinner"> 
    <div id="flipper"> 
    a 
    </div> 
</div> 

JQuery:

$("#flipBtn").on("click", function() { 
    $("#flipper").toggleClass("flip"); 
}); 

$("#spinBtn").on("click", function() { 
    $("#spinner").toggleClass("spin"); 
});