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; 
    } 



} 

}