使用 jquery 操作单个 CSS 转换效果

Manipulate individual CSS transform effects with jquery

本文关键字：转换 CSS 单个 jquery 操作 使用      更新时间：2023-09-26

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

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

但是我只想操作其中之一，例如在不影响当前比例值的情况下更改其平移坐标，我是否可以使用 JQuery 以一种不会强迫我解析整个字符串的方式做到这一点？

"class"属性已经可以做类似的事情了 - 我可以使用hasClass，addClass，removeClass，JQuery将为我进行解析。

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

更好的方法是混合CSS和JQuery。我创建了一个只使用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);
如果你已经在使用 jQuery，

那么你不妨使用 jQuery 默认附带的大量动画功能，而忘记 css 属性本身。

也就是说，如果您执意要控制各个转换属性，那么最好的选择是使用嵌套元素，其中每个元素都应用了一个转换规则：

function translateDiv(){
  var translateDiv = document.getElementById('translate');
  if( translateDiv.classList.contains( 'translate' ) ){
    translateDiv.classList.remove( 'translate' );
  } else {
    translateDiv.classList.add( 'translate' );
  }
}
function rotateDiv(){
  var rotateDiv = document.getElementById('rotate');
  if( rotateDiv.classList.contains( 'rotate' ) ){
    rotateDiv.classList.remove( 'rotate' );
  } else {
    rotateDiv.classList.add( 'rotate' );
  }
}
function scaleDiv(){
  var scaleDiv = document.getElementById('scale');
  if( scaleDiv.classList.contains( 'scale' ) ){
    scaleDiv.classList.remove( 'scale' );
  } else {
    scaleDiv.classList.add( 'scale' );
  }
}
div {
  transition: all 0.3s;
}
#block {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  background-color: #FBCE0C;
  pointer-events: none;
}
.scale {
  transform: scale(0.5);
}
.rotate {
  transform: rotate(45deg);
}
.translate {
  transform: translate(120px, 200px);
}
#btns {
  z-index: 5;
}
<div id="btns">
  <button onclick='translateDiv()'>Translate</button>
  <button onclick='rotateDiv()'>Rotate</button>
  <button onclick='scaleDiv()'>Scale</button>
</div>
<div id="translate">
  <div id="rotate">
    <div id="scale">
      <div id="block">
      </div>
    </div>
  </div>
</div>

相关文章：