Bootstrap Carousel 过渡项目 + animate.css

Posted

技术标签:

【中文标题】Bootstrap Carousel 过渡项目 + animate.css【英文标题】:Bootstrap Carousel transitions item + animate.css 【发布时间】:2016-06-09 18:23:51 【问题描述】:

我正在尝试用animate.cssBootstrap Carousel 制作动画 我finished with caption animation 一切正常,但是如何为item 设置动画 html

<div class="item zoomInLeft animated">
    <img data-src="/images/1.jpg" >
    <div class="carousel-caption">
       <h1 data-animation="bounceInDown" data-delay="400">Lorem Ipsum</h1>
       <h3 data-animation="bounceInDown" data-delay="600">Lorem Ipsum</h3>
    </div>
</div>

如果有人需要,我的字幕代码(JS)

function carousel_init(c)
        var self = this;
        self.carouselAnimations = function (elems) 
            elems.each(function (index) 
                var el = $(this);
                var animEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                var animation = el.data('animation')+' animated';
                var delay = el.data('delay');
                el.attr('style', '-webkit-animation-delay:'+delay+'ms; -moz-animation-delay:'+delay+'ms; -o-animation-delay:'+delay+'ms; animation-delay:'+delay+'ms')
               .promise().done(function()
                    el.addClass(animation).one(animEnd, function () 
                        el.removeClass(animation);
                    );
                );
            );
        
        var carousel = $(c);
        var firstElems = carousel.find('.item:first').find('[data-animation]'); 
        carousel.carousel(
            interval: 4000,
            pause:false,
            wrap:true
        );
        self.carouselAnimations(carousel, firstElems);
        carousel.on('slide.bs.carousel', function (e) 
            var elems = $(e.relatedTarget).find('[data-animation]'); 
            self.carouselAnimations(elems);
        );
    

所以我将使用data-animation(加上数据延迟)遍历active.item 中的所有元素并为它们设置动画。

    引导轮播的animate an Item也可以吗?

如果我只是添加类 zoomOutLeft animated 工作,但在此之前我需要添加 zoomInLeft animated(例如) 提前谢谢你

更新问题: @makshh 建议

.home-carousel .carousel-inner > .item 
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;

@media all and (transform-3d), (-webkit-transform-3d) 
  .home-carousel .carousel-inner > .item 
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
  

@media all and (transform-3d), (-webkit-transform-3d) 
  .home-carousel .carousel-inner> .item.next,
  .home-carousel .carousel-inner> .item.active.right 
    -webkit-transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
    transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
  
  .home-carousel .carousel-inner> .item.prev,
  .home-carousel .carousel-inner> .item.active.left 
    -webkit-transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
    transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
  
  .home-carousel .carousel-inner> .item.next.left,
  .home-carousel .carousel-inner> .item.prev.right,
  .home-carousel .carousel-inner> .item.active 
    -webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  

有效,但仅在 Chrome 中可以跨浏览器工作,因为我知道 transform3d 甚至在 IE10+ 中也有效

更新:删除 @media all and (transform-3d), (-webkit-transform-3d) 使其在 IE10+(FF、Opera)中工作

但问题仍然存在,我们能否整合 animate.css + bootstrap carousel。

【问题讨论】:

你需要什么确切的动画? @makshh animate.css 上的任何内容 也许这会对你有所帮助,我使用的是变换而不是动画codepen.io/makshh/pen/KzPOWb 你可以调整缩放、旋转、倾斜等。 @makshh 仅适用于 Chrome 我的转换解决方案? 【参考方案1】:

HTML(没什么特别的,纯 Bootstrap):

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
          <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/No._23_Post_(Skelmorlie)_Image_3.jpg/640px-No._23_Post_(Skelmorlie)_Image_3.jpg" >
          </div>
          <div class="item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg/640px-Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg" >
          </div>
          <div class="item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Image-Peacock_Springs_Entrance.jpg" >
          </div>
          <div class="item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Image-of-Sumadija-2.jpg/640px-Image-of-Sumadija-2.jpg" >
          </div>
          <div class="item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg/640px-Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg" >
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

CSS(禁用转场、变换,​​并将左侧设置为 0,我还更改了动画持续时间以匹配 Bootstrap 轮播默认持续时间,如果您想要不同于 0.6 秒的值,则必须覆盖 bootstrap.js 文件中的 Carousel.TRANSITION_DURATION = 600 和将animation-duration 更改为您的):

.item 
  transition: none !important;
  left: 0 !important;
  transform: none !important;

.animated 
  animation-duration: .6s;

JS(我没有测试它,我很确定它可以显着改进):

$('#carousel-example-generic').on('slide.bs.carousel', function() 
  if ($('.carousel-inner .item:last').hasClass('active')) 
    $('.carousel-inner .item:first').addClass('animated zoomInDown');
   else 
    $('.item.active').next().addClass('animated zoomInDown');
  
  $('.item.active').addClass('animated zoomOutDown');
);

$('#carousel-example-generic').on('slid.bs.carousel', function() 
  $('.item').removeClass('animated zoomInDown zoomOutDown')
);

$('.left').click(function () 
  if ($('.carousel-inner .item:first').hasClass('active')) 
    $('.carousel-inner .item:last').addClass('animated zoomInDown');
   else 
    $('.item.active').prev().addClass('animated zoomInDown');
  
);

$('.carousel-indicators > li').click(function () 
  $('.item').addClass('animated zoomInDown');
);

CODEPEN

【讨论】:

如果您担心 Firefox,我认为您无能为力。 bugzilla.mozilla.org/show_bug.cgi?id=962594#c25

以上是关于Bootstrap Carousel 过渡项目 + animate.css的主要内容,如果未能解决你的问题,请参考以下文章

如何让 Bootstrap 5 Carousel 滑动得更快?

Bootstrap 3轮播过渡速度

Bootstrap 4:轮播淡入淡出过渡不起作用

Bootstrap Carousel li 项目活动类不工作

Django Bootstrap Carousel 一次 4 个项目

如何跳转到 Bootstrap 的 Carousel 中的特定项目? [复制]