Javascript 如何将变换样式添加到“始终工作”？

我有一个“按钮”，点击后我添加转换样式。 但是如果我第二次单击，这个样式就不起作用了，因为它已经有这个类了

我如何改变这个

$（'.btn'）。在（'click'，函数（）{
$（this.addClass（'btn_transform'）；
});
.btn{
宽度：80px；
背景颜色：绿色；
高度：20px；
边界：无；
利润率：50像素；
光标：指针；
}
.btn_变换{
变换：旋转（180度）；
过渡：均为0.5s；
}
在单个块中删除和添加类将不起作用。一种可能的解决方案是删除该类，然后在很短的时间内使用
setTimeout
添加该类：


$（'.btn'）。在（'click'，函数（）{
var self=这个；
$（this.removeClass（'btn_transform'）；
设置超时(
函数（）{$（self）.addClass（'btn_transform'）}
, 10);
});
.btn{
宽度：80px；
背景颜色：绿色；
高度：20px；
边界：无；
利润率：50像素；
光标：指针；
}
.btn_变换{
变换：旋转（180度）；
过渡：均为0.5s；
}


$（“.btn”）.mouseup（函数（）{
setTimeout（函数（）{
$（“.btn”）.removeClass（'btn_transform'）；
}, 300);
});
$（“.btn”）.mousedown（函数（）{
$（this.addClass（'btn_transform'）；
});
.btn{
宽度：80px；
背景颜色：绿色；
高度：20px；
边界：无；
利润率：50像素；
光标：指针；
}
.btn_变换{
变换：旋转（180度）；
过渡：均为0.5s；
}

为什么不删除类？难吗？为什么不使用transitionend事件？