Jak uniknąć transformacji css (obrócić) podczas usuwania klasy?

Question

Chcę obrócić element onclick, dodając do niego klasę CSS. Problem polega na tym, że po usunięciu tej samej klasy CSS element jest obracany po raz drugi.

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); 
} 

Jak mogę tego uniknąć?

Answer 1

Będziemy chcieli, aby umieścić transition: transform 1s (i związane z nimi dostawcy przedrostków) na zasadzie .rotate CSS:

Powód podwójnym animacji: Trzeba było zdefiniowane właściwości przejścia na elemencie głównym. W rezultacie, gdy próbował dojść do swojej normalnej pozycji, znowu się obracał z powodu 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; 
 
} 
 

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

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

Answer 2

Można po prostu włączyć klasę zamiast dodawania i usuwania go.

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

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

 
} 
 

 
.rotate { 
 
\t -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>