Question

我目前正在构建一个包含旋转木马的网站，该网站应垂直滑过其项目。目前它在使用Firefox时效果很好，但是当我使用Chrome或Internet Explorer进行测试时，转换不能正常工作。我测试了我可以在这里和其他网站上找到的不同解决方案，但这些都不适用于我。

      <div id="brick-slider" class="carousel vertical slide first-item" data-ride="carousel">
<ol class="carousel-indicators">
  {% for item in items %}
    {% if loop.index0 == 0 %}
      <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}" class="active"></li>
    {% else %}
      <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}"></li>
    {% endif %}
  {% endfor %}
</ol>
<div class="carousel-inner vertical" role="listbox">
  {% for item in items %}
    {% if loop.index0 == 0 %}
      <div class="item active">
        {{ item.content }}
      </div>
    {% else %}
      <div class="item">
        {{ item.content }}
      </div>
    {% endif %}
  {% endfor %}
</div>
    <a class="up carousel-control" href="#brick-slider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="down carousel-control" href="#brick-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

这是我的标记。以下是我用于垂直运输的两种css变体。

.vertical .carousel-inner {
    height: 100%;
}

.carousel.vertical .item {
    -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
    top: 0;
}

.carousel.vertical .next {
    top: 100%;
}

.carousel.vertical .prev {
    top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
    top: 0;
}

.carousel.vertical .active.left {
    top: -100%;
}

.carousel.vertical .active.right {
    top: 100%;
}

.carousel.vertical .item {
    left: 0;
}

这是我使用的第一个变种。在Firefox中它运行得很好，但在Chrome和Edge中，活动元素没有滑出，它只是消失了，然后下一个元素缓和了。我希望活动元素缓和，这样你就可以看到转换就像标准一样引导水平旋转木马。

.carousel-inner.vertical {
    height: 100%;
}

.carousel-inner.vertical .item {
    -webkit-transition: .6s ease-in-out top;
    -o-transition: .6s ease-in-out top;
    transition: .6s ease-in-out top;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner.vertical .item {
        -webkit-transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
}

.carousel-inner.vertical .item.next, .carousel-inner.vertical 
.item.active.right {
    top: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.carousel-inner.vertical .item.prev, .carousel-inner.vertical 
.item.active.left {
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.carousel-inner.vertical .item.next.left, .carousel-inner.vertical .item.prev.right, .carousel-inner.vertical > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

.carousel-inner.vertical .active {
    top: 0;
}

.carousel-inner.vertical .next, .carousel-inner.vertical .prev {
    top: 0;
    height: 100%;
    width: 100%;
}

.carousel-inner.vertical .next {
    left: 0;
    top: 100%;
}

.carousel-inner.vertical .prev {
    left: 0;
    top: -100%
}

.carousel-inner.vertical .next.left, .carousel-inner.vertical .prev.right {
    top: 0;
}

.carousel-inner.vertical .active.left {
    left: 0;
    top: -100%;
}

.carousel-inner.vertical .active.right {
    left: 0;
    top: 100%;
}

使用第二个变体，我发现here对于Firefox来说它是一样的，它可以正常运行并完全应该做到的。至于Edge和Chrome，它现在可以缓解活动元素上方的下一个元素，然后活动元素消失。有时它甚至在活动元件后面缓和，有时它从侧面而不是顶部或底部缓和。有一些我想念的东西，但我无法支持它。我现在已经有很长一段时间了，所以我真的很感激这方面的帮助。

Answer 1

我遇到了同样的问题，在尝试bootstrap v3.02的那一刻它运行良好。发现差异，Bootstrap 3.6使用变换3d，这对于正常的水平旋转木马工作得很好，但它只是没有垂直旋转，所以只需覆盖你的CSS中的那段代码，在垂直滑块css规则之前，把这个：

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: none;
         -o-transition: none;
            transition: none;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
}

之后是css的一部分，用于造型垂直旋转木马。这对我有用。

在铬，即边缘固定垂直自举旋转木马

1 个答案: