Как я могу одновременно применять несколько поворотных преобразований путем переключения классов?

Я пытаюсь применить различные преобразования к данному элементу или набору элементов, нажимая кнопки для включения и выключения классов. Это работает для большинства вещей, но не тогда, когда я пытаюсь переключить более одного поворотного преобразования. Когда элемент имеет два отдельных класса преобразования вращения (rotateX, rotateZ), преобразования перестают работать, как я ожидаю.

Пожалуйста, смотрите мой пример здесь: 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");
});

Я бы ожидал, что я смогу перевернуть или повернуть окно в любое время, включив или выключив любой класс. Это не тот случай, когда оба класса были добавлены к нему.

Ответы

Ответ 1

Если вы хотите переключить несколько значений для одного и того же свойства, вам нужно вручную создать текст свойства (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');
});

Более простым решением было бы иметь два вложенных элемента для представления "окна", причем одно из преобразований применяется к внешнему, а одно - к внутреннему:

(см. эта отредактированная версия jblasco 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");
});