12

これは、この古い質問に対する@StrangeElementによる回答に関するフォローアップの質問です。スライドの移行時にTwitterBootstrapCarouselプラグインをフェードインおよびフェードアウトできますか

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

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

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

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

4

4 に答える 4

23

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

カルーセルを機能させるにdivは、追加のクラスcarousel-fadeを追加するだけで済みます。

[ソース]

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

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

.carousel.carousel-fade .active.item {
    opacity:1;
}
于 2012-04-26T23:27:01.810 に答える
7

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

 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 */
}
于 2013-04-04T15:23:02.727 に答える
2

カルーセルをスライドさせるのではなく、フェードする画像に変更することに成功しました。また、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での負のマージン遷移に関する問題を修正しますか？

于 2013-05-06T11:48:17.703 に答える
0

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

本当にクラスを追加する必要はありません。ブートストラップ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);}
}
于 2016-02-04T21:58:00.013 に答える