javascript - 使用 jquery 操作单个 CSS 变换效果

Question

如果我的元素定义了多个 CSS 变换效果，如下所示:

transform: translate(400px, 40px) scale(1);

但我只想操作其中一个，例如在不影响当前比例值的情况下更改其平移坐标，我可以使用 JQuery 以一种不会强制我解析整个字符串的方式来实现吗？

类似的事情已经可以用“class”属性完成——我可以使用 hasClass、addClass、removeClass，JQuery 会为我做解析。

我可以用 transform CSS pProperty 做类似的事情吗？

Answer 1

更好的方法是混合使用 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);