jquery - この CSS3 トランジションの不具合はなぜですか?

Question

グリッチのある 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;
}

誰でも助けることができますか？