Onclick 旋转（动画）没有发生答案

【问题标题】：Onclick rotation (animation) not happeningOnclick 旋转（动画）没有发生
【发布时间】：2012-09-28 18:05:52
【问题描述】：

我有一个关于我遇到的一个小问题的问题，我在这里画了草图：http://jsfiddle.net/gm3mG/1/

我想旋转<span id="rotator"> 中的箭头，但我不能让它工作。我做错了什么？

编辑：

我的第二个问题：如何让它在单击后 1 秒后将箭头旋转回来？

【问题讨论】：

【解决方案1】：

首先，您使用的是 jQuery，而不是 Mootools，因此您必须相应地配置 jsFiddle（查看左侧窗格中的 Choose Framework 部分）。

其次，CSS 转换不适用于内联元素，<span> 元素默认是内联的。使用 display: inline-block 设置样式可以解决您的问题。

你会发现一个更新的小提琴here。

编辑：关于问题的第二部分，规范的答案是使用window.setTimeout()。但是，您也可以使用 jQuery 动画工具，如 delay() 和 queue() 来实现相同的效果：

$("#rotator").addClass("lol").delay(1000).queue(function(next) {
    $(this).removeClass("lol");
    next();
});

你可以测试这个解决方案here。

【讨论】：

【解决方案2】：

transform property 仅适用于 transformable elements，您的 <span> 不是其中之一。

【讨论】：

【解决方案3】：

我会首先确保 .lol 类首先工作。只需将其应用于 span#rotator 即可。我尝试了小提琴，但它一开始就不起作用，更不用说 javascript 来动态地将类添加到它...

【讨论】：