1

我正在尝试使用 jQuery 和 css 转换对一些动画进行排序。看起来容器宽度应该动画，直到小部件完成从“顶部”css更改的过渡之后，但它们一起触发。

为什么

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

            widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

                container.css({'width': "19%"})

            });

        });

以与此相同的顺序制作动画？

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

        });

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            container.css({'width': "19%"})

        });
4

1 回答 1

5

在您的第一个示例中，您需要在添加 transitionEnd 事件之前设置 css。我相信这是你出错的地方。

widget.css({
    'top': '200px'
}).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

    widget.css({
        'top': '0px'
    }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

        container.css({
            'width': "300px"
        }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

            container.css({
                'width': "50px"
            }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

                widget.css({
                    'width': "400px"
                })

            });
        });

    });

});

只要您使用one而不是on使用 jQuery，链接转换就可以正常工作。

看到这个jsFiddle：

http://jsfiddle.net/gordyr/NSCd5/3/

我不确定你是否在做不同的事情，但希望这会有所帮助。

虽然我个人会将它包装成一个辅助函数以避免编写太多浏览器特定的代码......像这样的东西（未经测试）：

$.fn.transition = function(props, callback){
              $(this).css(props).one('webkitTransitionEnd otransitionend oTransitionEndmsTransitionEnd transitionend', function (i) {
                    if(typeof callback == 'function'){
                            callback();
                    }
              });
        return this;
});

像这样使用：

$(element).transition({top:'0px'}, function(){
      $(this).transition({top:'100px'}, function(){
          $(this).transition({top:'400px'}, function(){
               //Do something else
          });
    });
});

虽然使用缓存的元素而不是$(this)每次都受到当然...

于 2013-01-29T22:33:58.177 回答