jQuery toggleClass 缓动不影响 CSS 变换属性

Question

我愿意...

1. 单击一个元素（.switch）
2. 在另一个元素上切换 class (.div)
3. 切换的 class (.transformy) 逐渐应用 CSS 变换。

我已经能够使用其他 CSS classes 成功地做到这一点，例如背景颜色，但不能转换。

如您所见，转换应用了，但不是逐渐应用。

https://jsfiddle.net/ds06sehq/3/

$( ".switch" ).click(function() {
$( ".div" ).toggleClass("transformy", 1000, "easeInOutQuad" );
});

如何让切换的 class 的转换 属性 逐渐发生？当然愿意尝试非 js/jq 选项。

Answer 1

只需将此添加到您的 div

div {
  ..
  transition: all 1s;
  transform: rotate(0deg);
}

updated JSFiddle