如何添加转换样式以始终工作？

Question

我有一个＆＃34;按钮＆＃34;点击后我添加了变换样式。 但如果我第二次点击这种风格不起作用，因为它已经有了这个类。

如何更改此内容？

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(".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

Answer 2

在单个块中删除和添加类将不起作用。一种可能的解决方案是删除该类，稍后使用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>