UI Bootstrap Fade Carousel闪烁白色
UI Bootstrap Fade Carousel闪烁白色
提问于 2015-02-08 00:19:34
我试图为我的网站创建一个渐变过渡旋转木马用Bootstrap和AngularJS创建。我已经创建了这个效果，但我一直让这个闪光灯在每张幻灯片之间变白，而不是在前一张图片上进行漂亮的淡出。你现在可以在这里看到它的一个例子(直到问题得到回答或者我解决了它)：
http://development.artlyticalmedia.com/portfolio
我之所以使用UI Bootstrap，是因为它让Bootstrap与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>元素并不存在于标准的Bootstrap 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'
}];
});回答 2
Stack Overflow用户
发布于 2015-02-10 23:20:01
在遇到这个问题几个小时后，我终于发现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);
}
}Stack Overflow用户
发布于 2016-05-19 22:09:29
在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;
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28384414
复制相关文章
相似问题
腾讯云开发者
