変換スタイルを追加して、常に動作させる方法を教えてください。

Question

私は "ボタン"を持っており、クリック後に私は変形スタイルを追加します。 しかし、もう一度クリックすると、このクラスが既に存在するため、このスタイルは機能しません。

どうすれば変更できますか？取り外しと動作しません単一のブロックにクラスを追加

$('.btn').on('click', function() { 
 
    $(this).addClass('btn_transform'); 
 
});

.btn { 
 
    width: 80px; 
 
    background-color: green; 
 
    height: 20px; 
 
    border: none; 
 
    margin: 50px; 
 
    cursor: pointer; 
 
} 
 

 
.btn_transform { 
 
     transform: rotate(180deg); 
 
     transition: all 0.5s; 
 
}

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

 
<button class="btn"></button>

Answer 1

。可能な解決策は、クラスを削除して、それは非常に短い時間でsetTimeoutを使用して、後で追加：

$('.btn').on('click', function() { 
 
var self = this; 
 
$(this).removeClass('btn_transform'); 
 
setTimeout(
 
function(){$(self).addClass('btn_transform')} 
 
, 10); 
 
});

.btn { 
 
    width: 80px; 
 
    background-color: green; 
 
    height: 20px; 
 
    border: none; 
 
    margin: 50px; 
 
    cursor: pointer; 
 
} 
 

 
.btn_transform { 
 
     transform: rotate(180deg); 
 
     transition: all 0.5s; 
 
}

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

 
<button class="btn"></button>

Answer 2

$(".btn").mouseup(function() { 
 

 
    setTimeout(function() { 
 
    $(".btn").removeClass('btn_transform'); 
 
    }, 300); 
 

 
}); 
 

 

 
$(".btn").mousedown(function() { 
 

 
    $(this).addClass('btn_transform'); 
 

 
});

.btn { 
 
    width: 80px; 
 
    background-color: green; 
 
    height: 20px; 
 
    border: none; 
 
    margin: 50px; 
 
    cursor: pointer; 
 
} 
 
.btn_transform { 
 
    transform: rotate(180deg); 
 
    transition: all 0.5s; 
 
}

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

 
<button class="btn"></button>

$('.btn').on('click', function() { 
 
    $(this).addClass('btn_transform'); 
 
});

.btn { 
 
    width: 80px; 
 
    background-color: green; 
 
    height: 20px; 
 
    border: none; 
 
    margin: 50px; 
 
    cursor: pointer; 
 
} 
 

 
.btn_transform { 
 
     transform: rotate(180deg); 
 
     transition: all 0.5s; 
 
}

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

 
<button class="btn"></button>

enter code here