【问题标题】:twitter bootstrap's carousel fade transitiontwitter bootstrap 的轮播淡入淡出过渡
【发布时间】: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

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

【问题讨论】:

    标签: javascript css twitter-bootstrap carousel


    【解决方案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);}
        }
        

        【讨论】:

          猜你喜欢
          • 2018-03-07
          • 2018-05-27
          • 1970-01-01
          • 1970-01-01
          • 2018-09-23
          • 1970-01-01
          • 2018-07-17
          • 2012-02-04
          • 1970-01-01
          相关资源
          最近更新 更多