Question

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

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

但是我只想操纵其中一个，比如改变它的平移坐标而不影响当前的scale值，我可以用一种不会强迫我解析整个字符串的方式用JQuery吗？

类似的东西已经可以用＆＃34;类＆＃34;属性 - 我可以使用hasClass，addClass，removeClass和JQuery来为我做解析。

我可以使用转换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);

Answer 2

如果您已经在使用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>

使用jquery处理单个CSS转换效果

2 个答案: