为什么这个CSS3转换出现故障

Question

我有一个CSS3转换故障。我使用的是细丝响应转盘，有一些由图像、标题、<hr>和字幕组成的基本幻灯片。现在的情况是，旧的标题直到新的标题转换后才从屏幕上转换出来。它看起来有问题，我似乎不明白为什么会发生这种情况。

现在我制作了jsFiddle，我看到我的图像也发生了同样的事情，但在我的网站上，z索引的变化隐藏了新图像背后的行为。我想我不希望在"离开"的标题/图像上有任何过渡。

有很多代码，.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

您应该探索以下几点：

首先，它可以更高效地转换转换，而不是框模型属性（例如左、上等），例如：

-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;

类，但这似乎没有正确应用。您需要监听转换结束事件，然后应用

.carousel-item-instant

类到适当的转盘项目。请注意，一旦到了转盘项目再次设置动画的时间，您就必须再次删除此项。