Как избежать преобразования css (поворота) при удалении класса?

#javascript #css

Вопрос:

Я хочу повернуть элемент onclick, добавив к нему класс CSS. Проблема в том, что когда тот же самый класс CSS удаляется, элемент поворачивается во второй раз.

скрипка: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);
}

Как я могу избежать этого?

Ответ №1:

Вам нужно будет поместить transition: transform 1s (и связанные с ним префиксы поставщика) в .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>

Ответ №2:

Вы могли бы просто переключать класс вместо добавления и удаления его.

 $('#el').click(function(){
$(this).toggleClass('rotate');
});

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

}

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="el"></div>