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

            });
        });

    });

});

トランジションの連鎖は、jQueryoneの代わりに使用する限り正常に機能します。on

この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 に答える