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

Posted 2023-03-06

【中文标题】jQuery 调用 CSS3 版本的 stop(true,false) 和事件动画？

【英文标题】：jQuery call CSS3 version of stop(true,false) and animate from event?

【发布时间】：2012-12-28 01:58:58

【问题描述】：

谁能告诉我如何使用 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;
    
);

【问题讨论】：

(offtopic) 此代码已简化 (jsfiddle.net/dYYZP/76)

@roXon 我不喜欢使用三元，因为我有大量的动画触发。 js 做的越少，对我来说就越好，但是谢谢。

相信我有一天你会成为三元组的朋友，它会比 12 行代码中的 if else 更具可读性，特别是如果你需要处理大量的动画。可能你会开始更面向编程，并创建可重用的动画功能。

任何方式。您打算如何使用纯 css 注册点击？

@roXon i loooooove 三元，但我不明白最后的屈尊俯就。

【参考方案1】：

http://jsfiddle.net/dYYZP/81（请注意，为方便起见，我只包括了-webkit）。

CSS 2D 变换translate 可用于沿 X/Y 轴移动元素。这与 CSS3 过渡的组合允许类似的动画。

如果您想完全使用 CSS 来完成此操作，那么您必须将红色框设置为 <label> 用于复选框元素，然后使用 :checked + .slideout 之类的选择器来包含翻译规则。

动画期间无法停止 CSS 过渡；仅在动画完成后（通过删除规则）。

【讨论】：

因为您的示例正是 OP 需要的，但就我们需要使用 JS 注册点击事件而言，我认为我使用的 .toggleClass() 正在简化您的演示（以及 OP 需要）很多:)

@ExplosionPills：这是因为 roXon 简化了你的脚本。

@roXon 我完全赞成简化脚本。我只是在构建 OP 已经拥有的东西，因为它毕竟在那里。似乎他想做的不仅仅是在点击时切换课程。

@ExplosionPills 你完全正确。在这种情况下，您可以建议一个 2-function 方法，这意味着使用 .toggle(fn1, fn2) :)

@roXon 如果它不像我原来的小提琴那样动画化，为什么我需要它？它不起作用

【参考方案2】：

this是你想做的吗？

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

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

希望对你有帮助。

【讨论】：

天才！我不敢相信这很容易！动画完全是css3？

等不及我们不必使用 -browser-specifics 的那一天了。