我想使用 JS 删除或重置应用于特定 DOM 节点的样式。
node.style.webkitTransitionDuration = '5000ms';
node.style.webkitTransformOrigin = '200px 200px';
node.style.webkitTransform = 'rotateZ(25rad)';
我想重置/设置webkitTransform
一次又一次因事件而火热
尝试过这样的
node.style.webkitTransform = 'rotateZ(0rad)';
node.style.webkitTransform = 'rotateZ(25rad)';
但它不起作用。
附:不能使用任何框架。
这是一个应该适合您的需求的示例。当您单击文档时它会切换。注意:它当然只适用于基于 Webkit 的浏览器。
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)");
var toggle = toggleValue();
function animateNode(node, duration, origin, transform)
{
node.style['webkitTransitionDuration'] = duration;
node.style['webkitTransformOrigin'] = origin;
node.style['webkitTransform'] = transform;
}
function toggleValue() {
var num = 1;
return function ()
{
return ++num;
};
}
document.onclick = function()
{
var toggleNum = toggle();
if(toggleNum % 2 === 0)
{
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(0rad)");
}else if(toggleNum % 2 === 1)
{
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)");
}
}
http://jsfiddle.net/GdGw7/3/ http://jsfiddle.net/GdGw7/3/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)