javascript - 删除类时如何避免 css 转换(旋转)？

Question

我想通过向其添加 CSS 类来旋转元素 onclick。问题是，当删除相同的 CSS 类时，元素会第二次旋转。

fiddle :https://jsfiddle.net/L3x2zhd1/1/

JS:

var el = document.getElementById('el');

el.onclick = function() {
    el.className = 'rotate'
    setTimeout(function(){
    el.className = ''
    },1000)
};

CSS:

#el {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;

}

.rotate {
    -webkit-transform: rotate(180deg);
  transform: rotateX(180deg);
}

我怎样才能避免这种情况？

Answer 1

您需要将 transition: transform 1s(和相关的 vendor 前缀)放在 .rotate css 规则上:

双重动画的原因:您已经在根元素上定义了过渡属性。结果，当它试图回到正常位置时，由于 transition 而再次旋转。

var el = document.getElementById("el");

el.addEventListener("click", function() {
  el.classList.add("rotate");
  setTimeout(function() {
    el.classList.remove("rotate");
  }, 1000);
});

#el {
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  font-weight: bold;
  text-align: center;
}

.rotate {
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="el">test</div>