Jquery 引导转盘转换项+；动画_Jquery_Css_Twitter Bootstrap_Animation_Animate.css

Jquery 引导转盘转换项+；动画

jquery css twitter-bootstrap animation

Jquery 引导转盘转换项+；动画,jquery,css,twitter-bootstrap,animation,animate.css,Jquery,Css,Twitter Bootstrap,Animation,Animate.css,我正试图用animate.css 我完成了字幕动画一切正常，但如何设置项目的动画 HTML: 因此，我将使用数据动画（加上数据延迟）遍历活动.item中的所有元素，并为它们设置动画也可以为引导转盘的项目设置动画如果我只是添加classzoomOutLeft animated工作，但在此之前我需要添加zoomInLeft animated（例如）在adnvace谢谢你更新问题： @马什建议 .home-carousel .carousel-inner > .item { -web

我正试图用

animate.css

我

完成了字幕动画

一切正常，但如何设置

项目的动画

HTML:

因此，我将使用

数据动画（加上数据延迟）遍历活动.item
中的所有元素，并为它们设置动画
也可以为引导转盘的项目设置动画
如果我只是添加classzoomOutLeft animated
工作，但在此之前我需要添加zoomInLeft animated（例如）
在adnvace谢谢你
更新问题：
@马什建议
.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和（transform-3d），（-webkit-transform-3d）
使其在IE10+中工作（FF，Opera）
但问题仍然在这里，我们能否集成animate.css+引导旋转木马。HTML（没有什么特别的，纯引导）：
JS（我没有测试它，我很确定它可以显著改进）：
你需要什么样的动画？@makshh animate上的任何东西。csm可能这会对你有所帮助，我使用的是变换，而不是动画，你可以通过缩放、旋转、扭曲等进行调整。@makshh只在ChromeMy解决方案中使用变换？如果你担心Firefox，我想你无能为力。
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);
        });
    }

.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);
  }
}

<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" alt="...">
          </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" alt="...">
          </div>
          <div class="item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Image-Peacock_Springs_Entrance.jpg" alt="...">
          </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" alt="...">
          </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" alt="...">
          </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>

.item {
  transition: none !important;
  left: 0 !important;
  transform: none !important;
}
.animated {
  animation-duration: .6s;
}

$('#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');
});