jquery - 为什么我的 transitionend 事件会立即触发？

Question

我试图通过向两个元素添加和删除类来在两个元素之间创建过渡。我正在使用 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)和 /out 会立即被删除，这会导致屏幕上不会出现任何转换。

添加 setTimeout 解决了这个问题，但这样我就不需要监听 transitionEnd 了。

问题:
为什么我的 transitionEnd 触发器会立即触发，而不是在转换结束后触发？有更好的方法吗？

谢谢!

编辑:
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 将反转它，依此类推。

Answer 1

嗯...

// 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 调用。