在过渡期间删除项目之间的空白空间答案

【问题标题】：Remove empty space between items during transition在过渡期间删除项目之间的空白空间
【发布时间】：2016-05-25 01:26:58
【问题描述】：

我正在使用 Owl Carousel 创建幻灯片。

当我为所有轮播项目使用相同的背景颜色时，在项目之间的转换过程中会显示一个空白区域。

只有在使用 Chrome 浏览器时才会出现此问题。

请查看发生问题的示例： jsfiddle.net/7yd04b1p/7

我发现 Owl Carousel 正在使用 CSS3 translate3d 进行幻灯片转换，我认为 Chrome 正在以不同的方式呈现它。

doTranslate: function(pixels) {
  return {
    "-webkit-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "transform": "translate3d(" + pixels + "px, 0px,0px)"
  };
},

有人知道怎么解决吗？

谢谢！

【问题讨论】：

标签： css css-transitions owl-carousel translate3d owl-carousel-2

【解决方案1】：

将此添加到您的 JS 代码中

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: 3000,
    navigation: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true
  });
  // Add this code
  var widthItem = $(".owl-item").width();
  $(".owl-item .item").css("width", widthItem +1)
});

【讨论】：

【解决方案2】：

添加这个

.owl-wrapper {
  background: #000;
}

https://jsfiddle.net/breezy/Lrrebcjw/

【讨论】：

这解决了问题，但在我的情况下，每个项目的背景颜色都是从 CMS 动态设置的，所以我不知道将设置什么背景颜色，每个项目可以有不同的背景，但是谢谢快速回复。
没问题。如果这有助于您介意将其标记为答案？