1

我有一个小故障的 CSS3 过渡。我正在使用灯丝响应轮播，并有一些由图像、标题<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;
}

任何人都可以帮忙吗？

4

1 回答 1

3

您应该探索几件事：

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

-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

类到适当的轮播项目。请注意，一旦轮播项目再次设置动画，您必须再次删除它。

于 2013-07-18T10:31:49.817 回答