1

我试图通过向两个元素添加和删除类来创建两个元素之间的过渡。我正在使用 jQuery Mobile 提供的转换和类。

我使用 a 让它工作，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将反转它，依此类推。

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 回答