Question

我正在尝试通过单击按钮来打开和关闭类来将各种变换应用于给定元素或元素集。这适用于大多数事情，但不是当我尝试切换多个旋转变换时。一旦元素有两个单独的旋转变换类（rotateX，rotateZ），变换就会停止工作。

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");
});

我希望我可以通过打开或关闭课程来随时翻转或旋转盒子。一旦添加了两个类，就不会出现这种情况。

Answer 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');
});

更简单的解决方案是使用两个嵌套元素来表示“框”，其中一个转换应用于外部，一个应用于内部：

（见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");
});

如何通过切换类同时应用多个旋转变换？

1 个答案: