jquery - jQuery 调用 CSS3 版本的 stop(true,false) 和事件动画？

Question

谁能告诉我如何使用 CSS3 来做到这一点？

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 过渡；仅在动画完成后（通过删除规则）。

Answer 2

这是你想做的吗？

我刚刚将以下代码添加到您#inner的 css 中：

transition:left .5s;
-moz-transition:left .5s;
-webkit-transition:left .5s;

希望能帮助到你。