web-dev-qa-db-ja.com

twitterブートストラップのカルーセルフェードトランジション

これは、この古い質問に対する@StrangeElementによる回答に関するフォローアップの質問です： Twitter Bootstrapカルーセルプラグインはスライド遷移時にフェードインおよびフェードアウトできますか

@StrangeElementのmodをbootstrap.cssに試してみましたが、ほとんど機能しています。問題は、アクティブな画像がフェードアウトすると、白にフェードインし、次の画像がフェードインアニメーションなしでポップインすることです。ここで何が欠けているのでしょうか？

これが私が取り組んでいる例です：

http://planetofsoundonline.com/beta/index.php

どんな種類のポインタでも大歓迎です。ありがとう！

javascriptcsstwitter-bootstrapcarousel
12
Dan Byers

このフィドルを見てください を取ります。残念ながら、現在利用可能なバージョンのInternetExplorerでは機能しません。

カルーセルdivに必要なのは追加のクラスcarousel-fadeそれが機能するために追加されました。

[ ソース ]

このトランジションは次の画像を表示し、その上に新しい画像をフェードアウトします。直接フェードアウトフェードインアニメーションが必要な場合は、これらの行をcssに追加します。

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}
23
G.T.

追加についてはどうですか：

 filter: alpha(opacity=100); /* ie fix */

その結果：

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}
7
pwnjack

カルーセルをスライドさせるのではなく、フェード画像に変更することに成功しました。また、CSSを介して画像を拡大縮小し、応答性を高めました。

img.carousel-img {
  max-width:1900px;
  width:100%;
}

残念ながら、Webkitブラウザーでは、フェードアニメーションがアクティブである間、すべての画像が元のサイズに拡大されました。そして、各アニメーションが終了した直後に、画像は上記のCSSルールに従って正しくスケーリングされます（すぐに、アニメーション化されません）。もちろん、アニメーションはこのように素人っぽくて吃音に見えました。だから私は追加しました

-webkit-transform: translate3d(0,0,0);

カルーセルのフェードトランジションルールに準拠し、それ以来、アニメーションは魅力のように機能します。したがって、ルールは次のようになります。

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: translate3d(0,0,0);  /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */
}

ここで私はこの解決策を見つけました： なぜ '-webkit-backface-visibility：hidden;'を適用すると、ios/ipad 5.1で負のマージン遷移の問題が修正されますか？

2
Dennis Helfensteller

うまくいけば、次の人を助けます。スケールとフェードが欲しかった。

本当にクラスを追加する必要はありません。 Bootstrap 3.3.6

フェードとスケール（左/右矢印を考慮）

/* Carousel Scale and Fade */

/* Carousel Fade */
.carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}

/* Carousel Scale */
.carousel .item.active {
    animation: zoom 30s;
    -moz-animation: zoom 30s;
    -webkit-animation: zoom 30s;
    -o-animation: zoom 30s;
}
@keyframes zoom {
    from {transform:scale(1);}
    to {transform:scale(2);}
}
@-moz-keyframes zoom {
    from {-moz-transform:scale(1);}
    to {-moz-transform:scale(2);}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1);}
    to {-webkit-transform:scale(2);}
}
@-o-keyframes zoom {
    from {-o-transform:scale(1);}
    to {-o-transform:scale(2);}
}
0
Shawn Rebelo