Проблема с эффектом перехода CSS3

Question

С ссылкой на это Rotate image with onclick, я пытаюсь применить переход css3 к div, когда щелкнут элемент div. Демонстрация here Все работает отлично.

HTML

<div class="testRotate">Test rotate</div> 

CSS

.testRotate{ 
width: 300px; 
    height: 50px; 
    border: 1px solid black; 
    padding: 20px; 
    margin: 0px auto; 
    margin-top: 50px; 
    -moz-transition: transform 1s; 
    -webkit-transition: transform 1s; 
    transition: transform 1s; 
} 

.testRotate.rotate{ 
    transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

JS

$(function(){ 
    $("div").click(function(){ 
     $(this).addClass("rotate"); 
     setTimeout(function(){$("div").removeClass("rotate");}, 1500); 
    }); 
}); 

В этом примере, когда onclicking в DIV, Поворот класс будет применен к нему, поэтому он будет вращаться на 360 градусов, как определено в css. Иногда мы удаляем поворот класса, так что снова div возвращается в исходное положение.

Теперь мне нужно, когда он щелкнул, элемент должен вращаться на 360 градусов, но он не должен вращаться, как только поверните класс, который был удален из него.

Answer 1

Fiddle

$("div").click(function() { 
    if ( $(this).css("transform") == 'none'){ 
     $(this).css("transform","rotate(360deg)"); 
    } else { 
     $(this).css("transform",""); 
    } 
}); 

Answer 2

Вы можете добавить новый класс для перехода и удалить вращаться, а также класс для перехода.

$(function(){ 
 
     $("div").click(function(){ 
 
      $(this).addClass("testRotate rotate"); 
 
      setTimeout(function(){$("div").removeClass("testRotate rotate");}, 1500); 
 
     }); 
 
    });

.test { 
 
     width: 300px; 
 
     height: 50px; 
 
     border: 1px solid black; 
 
     padding: 20px; 
 
     margin: 0px auto; 
 
     margin-top: 50px; 
 
    } 
 
    .testRotate{ 
 
     -moz-transition: transform 1s; 
 
     -webkit-transition: transform 1s; 
 
     transition: transform 1s; 
 
    } 
 
    
 
    .testRotate.rotate{ 
 
     transform: rotate(360deg); 
 
     -moz-transform: rotate(360deg); 
 
     -webkit-transform: rotate(360deg); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div class="test testRotate">Test rotate</div> 
 
    
 

Fiddle Demo