我试图通过单击按钮来打开和关闭类来将各种变换应用于给定元素或元素集.这适用于大多数事情,但不是当我尝试切换多个旋转变换.一旦一个元素有两个单独的旋转变换类(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");
});
解决方法
如果要切换同一属性的多个值,则必须手动构造属性文本(
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");
});
