Bootstrapのカルーセルのクロスフェードでフェードアウトしない

Bootstrapのカルーセルのクロスフェードでフェードアウトしない



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

Bootstrapのカルーセルで2枚のスライド間をクロスフェードで切り替える際に、フェードインはするけれどフェードアウトはしない症状を確認しました。

CSSを確認すると

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 0s 0.6s;
  transition: opacity 0s 0.6s;
}

となっており、transitionの時間が0sになっているのが問題なのではないかと思い、

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

と変更して対処できました。

なぜ0sを付けているのかがよくわかりません。

今日はここまで

コメントを残す

メールアドレスが公開されることはありません。