为什么这个 CSS3 过渡有问题？

Question

我的 CSS3 转换有问题。我正在使用filament responsive carousel 并有一些由图像、标题、<hr> 和副标题组成的基本幻灯片。发生的情况是旧标题在新标题过渡之前不会从屏幕上过渡。它看起来有故障，我似乎无法弄清楚为什么会发生这种情况。

现在我制作了 jsFiddle，我看到我的图片也发生了同样的事情，但在我的网站上，z-index 的变化隐藏了新图片背后的行为。我想我宁愿在“离开”的标题/图像上完全没有过渡。

代码很多，.js脚本动态改变，所以我做了一个jsFiddle。您可以在那里看到故障行为。 javascript 将样式应用于 CSS 中指示且相对不言自明的过渡幻灯片，但如果您需要更多具体性，请转到 Fiddle。

基本的 html 如下所示：

<div class="carousel" data-transition="slide">
    <div class="slide">
        <img src="myimage.gif" />
        <h1>Slide 1</h1>
        <hr />
        <h5>Subtitle 1</h5>
    </div>
    <div class="slide">
        <img src="myimage2" />
        <h1>Slide 2</h1>
        <hr />
        <h5>Subtitle 2</h5>
    </div>
    <div class="slide">
        <img src="myimage3" />
        <h1>Slide 3</h1>
        <hr />
        <h5>Subtitle 3</h5>
    </div>
</div>

CSS 如下所示：

.carousel-slide {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-slide .carousel-item {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%; /* necessary for non-active slides */
    display: block; /* overrides basic carousel styles */
    z-index: 1;
    -webkit-transition: left .2s ease;
    -moz-transition: left .2s ease;
    -ms-transition: left .2s ease;
    -o-transition: left .2s ease;
    transition: left .2s ease;
}
.carousel-no-transition .carousel-item {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
.carousel-slide .carousel-active {
    left: 0;
    position: relative;
    z-index: 2;
}
.carousel-slide .carousel-in {
    left: 0;
}
.carousel-slide-reverse .carousel-out {
    left: 100%;
}
.carousel-slide .carousel-out,
.carousel-slide-reverse .carousel-in {
    left: -100%;
}
.carousel-slide-reverse .carousel-item {
    -webkit-transition: left .1s ease;
    -moz-transition: left .1s ease;
    -ms-transition: left .1s ease;
    -o-transition: left .1s ease;
    transition: left .1s ease;
}
.carousel-slide-reverse .carousel-active {
    left: 0;
}

谁能帮忙？

Answer 1

您应该探索几件事：

首先，it can be more performant to transition transforms instead of box model properties（例如左、上等），例如：

-webkit-transition: -webkit-transform 0.2s ease;

然后使用以下命令将它们从屏幕上移开：

.carousel-item {
    -webkit-transform: translateX(100%);
}

或者，如果您愿意：

.carousel-item {
    -webkit-transform: translate3d(100%, 0, 0);
}

旋转木马项目出现重影的问题是因为它仍然被转换回它的静止位置，而这应该是瞬时的。您可以通过将转换时间设置为 0 来做到这一点，例如：

.carousel-item-instant {
    -webkit-transition-duration: 0s;
}

我看到你有一个：

-webkit-transition: none;

class，但这似乎没有被正确应用。您需要监听过渡结束事件，然后应用

.carousel-item-instant

分类到相应的轮播项目。请注意，一旦轮播项目再次动画化，您必须再次删除它。