Javascript twitter bootstrap 的轮播淡入淡出过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10335181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap's carousel fade transition
提问by Dan Byers
this is a follow-up question regarding an answer by @StrangeElement to this older question: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition
这是一个关于@StrangeElement 对这个旧问题的回答的后续问题：Twitter Bootstrap Carousel 插件可以在幻灯片过渡时淡入淡出
i tried @StrangeElement's mod to the bootstrap.css and i almost have it working. the problem is that when the active image fade's out, it fades to white, then the next image will pop in with no fade in animation. what might i be missing here?
我在 bootstrap.css 中尝试了 @StrangeElement 的 mod，我几乎让它工作了。问题是当活动图像淡出时，它会淡入白色，然后下一个图像将在没有淡入动画的情况下弹出。我可能会在这里遗漏什么？
here's the example i'm working with:
这是我正在使用的示例：
http://planetofsoundonline.com/beta/index.php
http://planetofsoundonline.com/beta/index.php
any kind of pointers would be hugely appreciated. thanks!
任何类型的指针将不胜感激。谢谢！
回答by G.T.
Take a look at this fiddle. Unfortunately it doesn't work on any of the currently available versions of Internet Explorer.
快来看看这个小提琴。不幸的是，它不适用于任何当前可用的 Internet Explorer 版本。
Your carousel divonly needs an extra class carousel-fadeadded, for it to work.
你的轮播div只需要carousel-fade添加一个额外的类，它就可以工作。
[source]
[来源]
This transition shows the next image and then fades the new image out on top of it. If you want a direct fade out fade in animation, add these lines to the css.
此过渡显示下一个图像，然后在它上面淡出新图像。如果您想要直接淡出淡入动画，请将这些行添加到 css。
.carousel.carousel-fade .item {
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
回答by pwnHyman
What about adding:
添加怎么样：
filter: alpha(opacity=100); /* ie fix */
Resulting in:
导致：
.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 */
}
回答by Dennis Helfensteller
I succesfully changed the carousel to fading images instead of sliding them. And I also scaled the images via CSS so they are responsive :
我成功地将旋转木马更改为褪色图像而不是滑动它们。我还通过 CSS 缩放图像，以便它们具有响应性：
img.carousel-img {
max-width:1900px;
width:100%;
}
Unfortunately on Webkit-browsers, while the fading-animation was active, every image was scaled up to its original-size. And immediately after each animation has finished, the image would be scaled correct as per above CSS-rule again (immediately, not animated). Of course the animation looked amateurish & stuttering this way. So I added
不幸的是，在 Webkit 浏览器上，当淡入淡出动画处于活动状态时，每个图像都被放大到其原始大小。并且在每个动画完成后，图像将再次按照上述 CSS 规则进行正确缩放（立即，而不是动画）。当然，动画以这种方式看起来很业余和口吃。所以我加了
-webkit-transform: translate3d(0,0,0);
to the carousel′s fading-transition-rule and the animation works like a charm since then. So the rule looks like:
到轮播的淡入淡出过渡规则，从那时起动画就像一个魅力。所以规则看起来像：
.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 */
}
Here I found this solution: Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?
在这里我找到了这个解决方案：Why does apply '-webkit-backface-visibility: hidden;' 修复 ios / ipad 5.1 上负边距过渡的问题？
回答by Shawn Rebelo
Hopefully helps the next person. I wanted Scale and Fade.
希望能帮助下一个人。我想要缩放和淡入淡出。
Really do not need to add an additional class. Bootstrap 3.3.6
真的不需要添加额外的类。引导程序 3.3.6
Fade and Scale (Takes left/right arrows into consideration)
淡入淡出和缩放（考虑左/右箭头）
/* 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);}
}
