我試圖為我的網(wǎng)站創(chuàng)建一個用Bootstrap和AngularJS漸變過渡旋轉(zhuǎn)木馬。我已經(jīng)創(chuàng)建了這個效果，但是我在每張幻燈片之間一直讓這個閃光變成白色，而不是在之前的圖像上慢慢變淡。你現(xiàn)在可以在這里看到一個例子(直到這個問題被回答或者我解決它):

http://development.artlyticalmedia.com/portfolio

我使用UI Bootstrap，因為它使Bootstrap與AngularJS配合良好，而AngularJS已經(jīng)使大多數(shù)解決方案不準(zhǔn)確，因為我的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>

請注意& lt旋轉(zhuǎn)木馬& gt元素不在標(biāo)準(zhǔn)引導(dǎo)轉(zhuǎn)盤中；我相信它是一個& ltdiv class="carousel " >。我的SCSS，應(yīng)該給出正確的效果，看起來像這樣:

.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非常標(biāo)準(zhǔn)，除了我禁用了$animate，因為這是我以前必須實現(xiàn)的一個修復(fù)。不管怎樣，這就是:

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'
    }];
  });

在遇到這個問題幾個小時后，我終于發(fā)現(xiàn)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);
    }
}

在Sprazer所寫的基礎(chǔ)上，這里有一個mixin版本，您可以使用它并將其添加到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;
  }



}

}

我找到了這個，它對我有用:

/* Fix for flickering carousel */                                                      
.carousel-inner .carousel-item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
}
.carousel-inner .carousel-item:first-of-type {
  position: relative;
}
.carousel-inner .active {
  opacity: 1;
}
/* End of fix */

我不是專家，但對我有用的是:

.carousel-item {
    transition: none!important;
}

把它放入CSS中，白色閃光就會消失。