UI Bootstrap淡入淡出旋轉木馬閃爍白色

Question

我正在嘗試爲使用Bootstrap和AngularJS創建的我的網站創建淡入淡出的過渡輪播。我已經創建了這個效果，但是我仍然在每張幻燈片之間使這個閃光燈變成白色，而不是在之前的圖像上淡入淡出。你可以看到在這裏的例子，現在（直到問題得到解答或我修復它）：

http://development.artlyticalmedia.com/portfolio

我使用的用戶界面引導，因爲它使引導發揮好與AngularJS，這已經使得大多數的該解決方案在那裏不準確的，因爲我的HTML看起來像這樣：

<div class="container-fluid text-center" ng-controller="PortfolioCtrl" id="portfolio"> 
    <carousel interval="interval" class="carousel-fade"> 
    <slide ng-repeat="slide in slides" active="slide.active"> 
     <img ng-src="{{slide.image}}" alt="{{slide.alt}}"> 
    </slide> 
    </carousel> 
</div> 

注意，<carousel>元素不存在在一個標準的引導旋轉木馬;我相信這是一個<div class="carousel">。我SCSS，這應該給正確的效果，看起來是這樣的：

.carousel-fade { 
    .carousel-inner { 
    .item { 
     transition-property: opacity; 
     transition-duration: 1s; 
     opacity: 0; 
    } 

    .active { 
     opacity: 1; 
    } 

    .active.left, 
    .active.right { 
     left: 0; 
     opacity: 0; 
     z-index: 1; 
    } 

    .next.left, 
    .prev.right { 
     opacity: 1; 
    } 
    } 

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

我的JavaScript是非常標準的，只是我禁用$animate，因爲這是一個修復我以前來實現。這是反正：

angular.module('comartlyticalmediawwwApp') 
    .controller('PortfolioCtrl', function ($scope, $animate) { 
    $scope.interval = 3000; 

    $animate.enabled(false); 
    $scope.animate = null; 
    $scope.animateGlobal = true; 

    $scope.slides = [ 
    { 
     image: 'images/portfolio/websites/3dsailing-Home.png', 
     alt: 'plan' 
    }, 
    { 
     image: 'images/portfolio/websites/3dsailing-SailCoachPro.png', 
     alt: 'act' 
    }, 
    { 
     image: 'images/portfolio/websites/3dsailing-3D-Printing.png', 
     alt: 'done' 
    }, 
    { 
     image: 'images/portfolio/websites/Glass-Planner-Home.png', 
     alt: 'done' 
    }, 
    { 
     image: 'images/portfolio/websites/Glass-Planner-PlanActDone.png', 
     alt: 'done' 
    }, 
    { 
     image: 'images/portfolio/websites/Glass-Planner-Tutorials.png', 
     alt: 'done' 
    }]; 
    }); 

Answer 1

有這個問題幾個小時後，我終於發現transform：translate3d（）是我們都有這個問題的原因。

嘗試使用此代碼：

.carousel-fade { 
    .carousel-inner { 
    .item { 
     opacity: 0; 
     -webkit-transition-property: opacity; 
     transition-property: opacity; 
    } 

    .active { 
     opacity: 1; 
    } 

    .active.left, 
    .active.right { 
     left: 0; 
     opacity: 0; 
     z-index: 1; 
    } 

    .next.left, 
    .prev.right { 
     opacity: 1; 
    } 
    } 

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

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right, 
    .carousel-inner > .item.active { 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
} 

Answer 2

擴展在什麼Sprazer中寫道，這裏是您可以使用，並把它添加到您的SCSS片的頂層一個混合版本：

@mixin carousel-fade() { 

.carousel { 

    .carousel-inner { 

    >.item { 
     opacity: 0; 
     -webkit-transition-property: opacity; 
     transition-property: opacity; 

      @media all and (transform-3d), (-webkit-transform-3d) { 

      &.next, 
      &.active.right, 
      &.prev, 
      &.active.left, 
      &.next.left, 
      &.prev.right, 
      &.active { 
       -webkit-transform: translate3d(0, 0, 0); 
       transform: translate3d(0, 0, 0); 
      } 

      } 

    } 

    .active { 
     opacity: 1; 
    } 

    .active.left, 
    .active.right { 
     left: 0; 
     opacity: 0; 
     z-index: 1; 
    } 

    .next.left, 
    .prev.right { 
     opacity: 1; 
    } 
    } 

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



} 

}