10

我试图通过单击按钮来打开和关闭类，将各种转换应用于给定元素或一组元素。这适用于大多数事情，但当我尝试打开多个旋转变换时则不行。一旦一个元素有两个独立的旋转变换类（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");
});

我希望我可以随时通过打开或关闭课程来翻转或旋转盒子。一旦将两个类都添加到其中，情况就不是这样了。

4

1 回答 1

1

如果要切换同一属性的多个值，则必须手动构造属性文本（小提琴）：

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 小提琴的此编辑版本）

#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>

查询：

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

$("#spinBtn").on("click", function() {
    $("#spinner").toggleClass("spin");
});
于 2013-08-05T17:19:04.750 回答