[英]'toggel' rotation of element back and forth using css3/jquery
i've got an image that i want to onclick animate the rotation 90degress, when its clicked again i want it to animate the rotation -90degrees. 我有一个图像,我想onclick为旋转90度动画,当再次单击它时,我希望它为旋转90度动画。
For the rotation im using the css3 transform: 对于使用css3变换的旋转im:
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
For the jquery I want to set a varable to check if the object has been rotated, then act accordingly. 对于jQuery,我想设置一个变量以检查对象是否已旋转,然后采取相应措施。
I have been having a real difficult time trying to get it to work. 我一直很难让它工作。 I've put together a JsFiddle .
我整理了一个JsFiddle 。
This is the code I am using: 这是我正在使用的代码:
var turn = true;
$("#button").click(function () {
$("#shape").css('transform', function(index) {
return index * 90;
});
});
Add some transitions and a rotate class, and just toggle that class: 添加一些过渡和旋转类,然后切换该类:
css: CSS:
#shape { width: 100px;
height: 200px;
background:#000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate {-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
js: js:
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});
如果我的理解是正确的, 这应该这样做。
I think in general, if you're going to use transition's you should target the specific properties you want to affect. 我认为通常来说,如果您要使用Transition,则应该定位要影响的特定属性。 I would consider the use of "all" to be poor practice.
我认为使用“全部”是不好的做法。
Target alternative: css: 目标替代方案:CSS:
#shape {
width: 100px;
height: 200px;
background:#000;
-moz-transition: transform 1s ease;
-webkit-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
///jquery
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.