Question

我有一个小故障的CSS3过渡。我正在使用filament responsive carousel，并且有一些由图片组成的基本幻灯片，标题为<hr>和副标题。正在发生的事情是，在新标题转换之后，OLD标题不会从屏幕上过渡。它看起来很糟糕，我似乎无法弄清楚它为什么会发生。

现在我创建了jsFiddle，我看到我的图像发生了同样的事情，但在我的网站上，z-index更改隐藏了新图像背后的行为。我想我不希望在“离开”的标题/图像上完全没有过渡。

有很多代码，.js脚本动态地更改它，所以我创建了一个jsFiddle。你可以看到那里的毛刺行为。 javascript将样式应用于过渡幻灯片，这些样式在CSS中表示并且相对不言自明，但如果您需要更多特异性，请转到小提琴。

基本的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;

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

.carousel-item-instant

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

为什么这个CSS3过渡很奇怪？

1 个答案: