Twitter的引導旋轉木馬淡出過渡

這是關於通過@StrangeElement回答這個問題年長的後續問題：Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition Twitter的引導旋轉木馬淡出過渡

我試圖@ StrangeElement的MOD到bootstrap.css和我差不多有工作。問題是，當活動圖像淡出時，它會淡化爲白色，然後下一個圖像將彈出而不會淡入動畫。我可能會在這裏錯過什麼？

這裏是我的工作的例子：

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

任何指針將非常感激。謝謝！

來源

2012-04-26 Dan Byers

以look at this fiddle。不幸的是，它不適用於任何當前可用的Internet Explorer版本。

你的旋轉木馬div只需要一個額外的類carousel-fade加入，爲它工作。

[source]

該過渡示出了下一個圖像，然後褪色新圖像出在它的上面。如果你想直接淡入淡出動畫，將這些行添加到CSS。

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

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

來源

2012-04-26 23:27:01

的感謝！這當然適用於「真正」的瀏覽器;）。不幸的是，我確實需要支持IE，所以我不得不尋找另一種解決方案。 – 2012-05-01 04:22:35

@DanByers，你有沒有找到另一種解決方案？ – 2013-01-15 16:41:09

什麼補充說：

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-04 15:23:02 pwnjack

我改變成功傳送帶褪色的圖像，而不是滑動他們。而且我還通過縮放CSS的圖像，使它們響應：

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

不幸的是在WebKit的瀏覽器，而衰落的動畫是活躍的，每幅圖像被放大到原來的大小。在每個動畫完成後，立即再次按照上述CSS規則縮放圖像（立即，而不是動畫）。當然動畫看起來業餘&這樣的口吃。所以我添加

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

到carousel's衰落過渡規則和動漫作品就像一個魅力至今。因此，規則如下：

.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 */ 
}

在這裏，我發現這個解決方案：Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios/ipad 5.1?

來源

2013-05-06 11:48:17

希望幫助下一個人。我想要Scale和Fade。

真的不需要添加額外的類。引導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-04 21:58:00

Twitter的引導旋轉木馬淡出過渡

回答

相關問題