グリッチのある 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;
}
誰でも助けることができますか?