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

... MH

// 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来电。

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

1 个答案: