为什么我的 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）和in/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 调用。