1

両方の要素にクラスを追加および削除することにより、2 つの要素間の遷移を作成しようとしています。jQuery Mobile が提供するトランジションとクラスを使用しています。

を使用して動作させましたsetTimeoutが、これは動作するはずの方法ではありません。

これが私が現在行っていることです：

_transitionEndEvents : "webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd"

// triggered by a radio button being changed
_onChange: function (e) {
    var self = this,
      el = self.element,
      o = self.options,
      activeElement = el.children().filter(".ui-carousel-active"),
      transition = $.mobile._maybeDegradeTransition( o.carouseltransition ),
      complete = function (li, clear) {
        var removeActive = clear ? "ui-carousel-active" : "";
        // don't like
        setTimeout(function(){
          li.off( self._transitionEndEvents, complete )
            .removeClass( o.carouseltransition + " in out " +  removeActive);
        },200);
      }

    // active elements needs to transition out
    activeElement
      .addClass(transition + " out")
      .on( self._transitionEndEvents, complete(activeElement, true) );

    // element clicked contains a reference to the element
    // that should be the new active element
    e.target.reference
      .addClass(transition + " in ui-carousel-active")
      .on( self._transitionEndEvents, complete(e.target.reference) );

}

だから私の考えは、非アクティブ化される要素とアクティブ化されなければならない要素の両方が同じcomplete機能を共有し、ui-carousel-active削除されるという違いがあるということでした。

私の問題は、transitionEndイベントがすぐにトリガーされるため、トランジション クラス (transitionたとえばslide) とin/outがすぐに削除されるため、トランジションが画面に表示されないことです。

を追加するとsetTimeoutこれは解決しますが、 をリッスンする必要はありませんtransitionEnd。

質問:トランジションの終了後ではなく、すぐ
にトリガーが起動するのはなぜですか? transitionEndこれを行うより良い方法はありますか？

ありがとう！

EDIT :
jQuery Mobile のトランジションは CSS3 トランジションであり、要素へのクラスの追加/削除によってトリガーされます。例えば：

/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
-webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
-moz-animation-duration: 250ms;
transform: translateY(0);
animation-name: slideinfrombottom;
animation-duration: 250ms;
}
.slideup.in.reverse {
-webkit-animation-name: fadein;
-webkit-animation-duration: 150ms;
-moz-animation-name: fadein;
-moz-animation-duration: 150ms;
animation-name: fadein;
animation-duration: 150ms;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
-webkit-animation-name: slideouttobottom;
-webkit-animation-duration: 200ms;
-moz-transform: translateY(100%);
-moz-animation-name: slideouttobottom;
-moz-animation-duration: 200ms;
transform: translateY(100%);
animation-name: slideouttobottom;
animation-duration: 200ms;
}

したがって、クラスを追加するslideup inと、スライドアップ トランジションがトリガーされます。クラスslideup in reverseを追加すると逆になります。

4

1 に答える 1

0

ん...

// active elements needs to transition out
activeElement
  .addClass(transition + " out")
  .on( self._transitionEndEvents, complete(activeElement, true) );

// element clicked contains a reference to the element
// that should be the new active element
e.target.reference
  .addClass(transition + " in ui-carousel-active DUMB")
  .on( self._transitionEndEvents, complete(e.target.reference) );

問題は、「トランジション」のクラス (例: slide) を追加することinであり、リスナーを設定する前にトランジションをトリガーします。それがうまくいかなかった理由です。

最初にリッスンしてからトリガーするように順序を変更するだけです。

// active elements needs to transition out
activeElement
  .on( self._transitionEndEvents, complete(activeElement, true) )
  .addClass(transition + " out");


// element clicked contains a reference to the element
// that should be the new active element
e.target.reference
  .on( self._transitionEndEvents, complete(e.target.reference) )
  .addClass(transition + " in ui-carousel-active");

それを修正し、setTimeout通話を削除できます。

于 2013-06-26T17:18:17.877 に答える