twitter bootstrap 的轮播淡入淡出过渡

Posted 2023-02-22

【中文标题】twitter bootstrap 的轮播淡入淡出过渡

【英文标题】：twitter bootstrap's carousel fade transition

【发布时间】：2012-05-07 06:57:11

【问题描述】：

这是关于@StrangeElement 对这个旧问题的回答的后续问题：Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

我尝试了 @StrangeElement 对 bootstrap.css 的 mod，我几乎让它工作了。问题是，当活动图像淡出时，它会淡出为白色，然后下一个图像会弹出而没有淡入动画。我在这里可能缺少什么？

这是我正在使用的示例：

http://planetofsoundonline.com/beta/index.php

任何类型的指针都将不胜感激。谢谢！

【参考方案1】：

参加look at this fiddle。不幸的是，它不适用于任何当前可用的 Internet Explorer 版本。

您的轮播 div 只需要添加一个额外的类 carousel-fade 即可工作。

[source]

此过渡显示下一张图像，然后在其上淡出新图像。如果您想要直接淡出淡入淡出动画，请将这些行添加到 css。

.carousel.carousel-fade .item 
  opacity:0;


.carousel.carousel-fade .active.item 
    opacity:1;

【讨论】：

谢谢！这当然适用于“真正的”浏览器；）。不幸的是，我确实需要支持 IE，所以我不得不寻找另一个解决方案。

@DanByers 你找到另一个解决方案了吗？

【参考方案2】：

添加呢：

 filter: alpha(opacity=100); /* ie fix */

导致：

.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 */

【参考方案3】：

我成功地将轮播更改为褪色图像而不是滑动它们。而且我还通过 CSS 缩放图像，以便它们响应：

img.carousel-img 
  max-width:1900px;
  width:100%;

不幸的是，在 Webkit 浏览器上，当淡入淡出动画处于活动状态时，每个图像都被放大到其原始大小。在每个动画完成后，图像将再次按照上面的 CSS 规则正确缩放（立即，不是动画）。当然，这样的动画看起来很业余和口吃。所以我加了

-webkit-transform: translate3d(0,0,0);

旋转木马的淡入淡出过渡规则和动画从那时起就像一个魅力。所以规则看起来像：

.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 */

在这里我找到了这个解决方案：Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?

【参考方案4】：

希望能帮助下一个人。我想要 Scale and Fade。

真的不需要添加额外的类。 引导程序 3.3.6

渐变和缩放（考虑左/右箭头）

/* 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);