ブートストラップカルーセルはCSS調整後にスムーズに移行しません

Question

私は過去3時間、ブートストラップ3のカルーセル移行を簡単に調整しようとしていました。 私は、これはどんな効果を持っているように見える唯一のものであるスライド速度変更しようとしました：

.carousel-inner .item { 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    transition-duration: 2s; 
} 

が、それはあまりにも早くコンテンツ「を残して」隠し、私は修正するどのような性質見当もつかないをそれを修正してください。

私はまた、

.carousel-fade .item { 
    opacity: 0; 
    -webkit-transition: opacity 2s ease-in-out; 
    -moz-transition: opacity 2s ease-in-out; 
    -ms-transition: opacity 2s ease-in-out; 
    -o-transition: opacity 2s ease-in-out; 
    transition: opacity 2s ease-in-out; 
    left: 0 !important; 
} 

.carousel-fade .active { 
    opacity: 1 !important; 
} 

.carousel-fade .left { 
    opacity: 0 !important; 
    -webkit-transition: opacity 0.5s ease-in-out !important; 
    -moz-transition: opacity 0.5s ease-in-out !important; 
    -ms-transition: opacity 0.5s ease-in-out !important; 
    -o-transition: opacity 0.5s ease-in-out !important; 
    transition: opacity 0.5s ease-in-out !important; 
} 

.carousel-fade .carousel-control { 
    opacity: 1 !important; 
} 

とフェードトランジションそして、私が遭遇しましたが、すべての単一の1が常に最初に残してコンテンツを削除するように行うには、ほぼすべての他のスニペットにそれを変更してみました次のフェードアウトの前に、特徴のない背景を示しています。私は何が欠けていますか？私が必要とするのは、既存のトランジションの詳細をオーバーライドするための単純なCSSですが、それ以上見える場所はわかりません。

Answer 1

私はブートストラップのカルーセルプラグインのさまざまな側面があなたが言及する効果を与えると思います。アクティブでない項目がdisplay: none

を有しながら

1. アクティブアイテムこれは、すべての項目display: blockを与え、その後、重複アイテムを生じる、top: 0とleft: 0とabsoluteにpositionを設定することにより解決することができるdisplay: blockを有します。 opacity: 0;を設定すると、デフォルトでは非表示になります。

   控除：position: absoluteの

   .carousel-inner > .item { 
       opacity: 0; 
       top: 0; 
       left: 0; 
       width: 100%; 
       display: block; 
       position: absolute; 
   } 
   

   一つの問題は、コンテナがheightを得ないということです。前の項目は、最初の項目のpositionをrelativeに設定することで解決できます（既に正しい位置を追加しています）。少ないコードでは、以下の通りである：

   .carousel-inner > .item { 
       :first-of-type { 
       position:relative; 
       } 
   } 
   

2. ブートストラップは、空間内の項目の位置を変更するtranslate3d Sを使用します。これらの変換は必要ありませんので、再設定してください。以下、コードを以下に示す活用：

   .carousel-inner > .item { 
       transform: translate3d(0,0,0) !important; 
   } 
   

3. CSS遷移はjQueryを使ってCSSクラスを追加および削除することによってトリガされます。これらのクラス変更の間の時間は、カルーセルプラグインコード（Carousel.TRANSITION_DURATION = 600）にハードコードされています。したがって、600ミリ秒後に、1つのアイテムがアクティブになります（.activeクラスを持つ）。それはあなたのCSS transition-durationが0.6秒より大きい場合に予期しない動作が発生する理由です。次のように

CSSクラスの変更がある：だから>.active

- - >.active.left - >次のアイテムは何のクラスを持っていない なし - >.next.left

アクティブな項目は、クラス.activeを持っています.active.leftと.next.leftが重要です（後方にスライドすると.prev.rightと.active.right）。

すべての画像が既に積み重なっているので、opacityを同時に変更することができるので、z-indexプロパティを使用してスタック内の画像を表示することができます。 this demoに結果を参照してください、

.carousel-control { 
    z-index:4; 
} 

はすべて一緒に置く：使用、コントロールが同様に表示されていることを確認するために

.carousel-inner { 
    > .next.left { 
    transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    z-index:2; 
    } 
    > .active.left { 
    z-index:1; 
    } 
} 

：あなたは次のスライドにフェードインするには、以下の少ないコードを使用することができます次の少ないコード使用する：上記のコードは、次のコマンドとCSSにLess autoprefixer pluginプラグインを使ってコンパイルすることができる

.carousel-inner { 
> .item { 
    opacity: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    position: absolute; 
    z-index:0; 
    transition: none; 
    transform: translate3d(0,0,0) !important; 
    &:first-of-type { 
    position:relative; 
    } 
    } 
> .active { 
    opacity: 1; 
    z-index:3; 
} 

> .next.left, 
> .prev.right { 
    transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    left: 0; 
    z-index:2; 
    }                            
> .active.left, 
> .active.right { 
    z-index:1; 
    } 
} 
.carousel-control { 
z-index:4; 
} 

た：

lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' code.less 

出力する：

.carousel-inner > .item { 
    opacity: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    position: absolute; 
    z-index: 0; 
    -webkit-transition: none; 
     -o-transition: none; 
      transition: none; 
    -webkit-transform: translate3d(0, 0, 0) !important; 
      transform: translate3d(0, 0, 0) !important; 
} 
.carousel-inner > .item:first-of-type { 
    position: relative; 
} 
.carousel-inner > .active { 
    opacity: 1; 
    z-index: 3; 
} 
.carousel-inner > .next.left, 
.carousel-inner > .prev.right { 
    -webkit-transition: opacity 0.6s ease-in-out; 
     -o-transition: opacity 0.6s ease-in-out; 
      transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    left: 0; 
    z-index: 2; 
} 
.carousel-inner > .active.left, 
.carousel-inner > .active.right { 
    z-index: 1; 
} 
.carousel-control { 
    z-index: 4; 
}