如果我的元素定义了多个 CSS 变换效果,如下所示:
transform: translate(400px, 40px) scale(1);
但我只想操作其中一个,例如在不影响当前比例值的情况下更改其平移坐标,我可以使用 JQuery 以一种不会强制我解析整个字符串的方式来实现吗?
类似的事情已经可以用“class”属性完成——我可以使用 hasClass、addClass、removeClass,JQuery 会为我做解析。
我可以用 transform CSS pProperty 做类似的事情吗?
最佳答案
更好的方法是混合使用 CSS
和 JQuery
。我创建了一个 fiddle只使用 CSS
和 JavaScript
在那里你可以看到使用类就足够了。
我建议您使用 JQuery
来做到这一点,因为您可以做更复杂的事情。
只有 CSS
不足以实现复杂的效果,只有 JQuery
编码效率不高。
HTML:
<div id="d1"></div>
CSS:
div{
position:relative;
float:left;
height:100px;
width:100px;
background-color:red;
}
.scale{
-webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
transform: scale(0.5);
}
.translate{
-webkit-transform: translate(100px,0); /* Chrome, Safari, Opera */
transform: translate(100px,0);
}
.scale.translate{
-webkit-transform: translate(50px,0) scale(0.5); /* Chrome, Safari, Opera */
transform: translate(50px,0) scale(0.5);
}
JS:
var d1 = document.getElementById("d1");
d1.setAttribute("class","scale");
setTimeout(function(){
d1.setAttribute("class","translate");
},3000);
setTimeout(function(){
d1.setAttribute("class","translate scale");
},6000);
关于javascript - 使用 jquery 操作单个 CSS 变换效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22759383/