bootstrap.carousel：如何＆＃39; $ next [0] .offsetWidth＆＃39;在幻灯片功能中工作

Question

在bootstrap / js / carousel.js中，Carousel的 slide 函数在下面有一行：

$next[0].offsetWidth // force reflow

使用此行，当前活动幻灯片转换后的下一张幻灯片工作的转换。但是，如果没有这一行，下一张幻灯片的转换就不起作用了。这让我很困惑。

只是想知道上面的代码如何产生这种效果。谢谢！

我将幻灯片功能粘贴在下方：

Carousel.prototype.slide = function(type, next){
  var $active = this.$element.find('.item.active');
  var $next = next || this.getItemForDirection(type, $active);
  var isCycling = this.interval;
  var direction = type == 'prev' ? 'right' : 'left'
  var that = this;

  if($next.hasClass('active')) return this.sliding = false;

  this.sliding = true;

  var relatedTarget = $next[0];

  isCycling && this.pause();

  if(this.$indicators.length){
    this.$indicators.find('.active').removeClass('active');
    var nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]);
    nextIndicator && nextIndicator.addClass('active');
  }

  var slideEvent = $.Event('carousel.slide.after', {relatedTarget: relatedTarget, direction: direction});
  if($.support.transition && this.$element.hasClass('slide')){
    $next.addClass(type);
    $next[0].offsetWidth // force reflow
    $active.addClass(direction);
    $next.addClass(direction);
    $active.one($.support.transition.end, function(e){
      $next.removeClass([type, direction].join(' ')).addClass('active');
      $active.removeClass(['active', direction].join(' '));
      that.sliding = false;
      setTimeout(function(){
        that.$element.trigger(slideEvent);
      }, 0)
    })
      .emulateTransitionEnd(Carousel.TRANSITION_DURATION);
  }else{
    $active.removeClass('active');
    $next.addClass('active');
    this.sliding = false;
  }

  isCycling && this.cycle();
};