jQuery调用CSS3版本的stop（true，false）和animate从事件？ [英] jQuery call CSS3 version of stop(true,false) and animate from event?

问题描述

有人可以告诉我如何使用CSS3执行这个吗？

Can anyone show me how to use CSS3 to do this?

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

我一直在试图找出如何通过事件调用CSS3转换和停止转换像jQuery的 stop（true，false）几个月。

I've been trying to figure out how to call CSS3 transitions via events and stopping transitions like jQuery's stop(true, false) for months.

<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;
    }
});

推荐答案

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

http://jsfiddle.net/dYYZP/81 (note that I only included -webkit for convenience).

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

The CSS 2D transform translate can be used to move an element along the X/Y axis. This, with a combination of CSS3 transitions, allows for a similar animation.

如果你想这样做纯粹用CSS，那么你必须使红色框< label> ，然后使用类似于：checked + .slideout 。

If you wanted to do this purely with CSS, then you would have to make the red box a <label> for checkbox element and then have a selector like :checked + .slideout that would include the translate rule.

在动画期间没有办法停止CSS转换;只有一次动画完成（通过删除规则）。

There is no way to stop CSS transitions during animation; only once the animation is complete (by removing the rule).

这篇关于jQuery调用CSS3版本的stop（true，false）和animate从事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！