jQuery 调用 CSS3 版本的 stop(true,false) 并从事件中制作动画？

Question

谁能告诉我如何使用 CSS3 来做 this ？

http://jsfiddle.net/dYYZP/65/

几个月以来，我一直在尝试弄清楚如何通过事件调用 CSS3 转换并停止像 jQuery 的 stop(true, false) 这样的转换。

<div id="outer"></div>
<div id="inner"></div>

var under = true;
$("#outer").bind({
    click : function() {
        if(under){
            $("#inner").stop(true, false).animate( {
                left: 50
            }, 500);
        }
        else{
            $("#inner").stop(true, false).animate( {
                left: -50
            }, 500);    
        }
        under = !under;
    }
});

Answer 1

http://jsfiddle.net/dYYZP/81 (请注意，为了方便起见，我仅包含 -webkit)。

CSS 2D 变换 translate可用于沿 X/Y 轴移动元素。结合 CSS3 过渡，可以实现类似的动画。

如果你想纯粹使用 CSS 来完成此操作，那么你必须将红色框设置为 <label>对于复选框元素，然后有一个像 :checked + .slideout 这样的选择器这将包括翻译规则。

动画期间无法停止 CSS 转换；仅当动画完成后(通过删除规则)。