Question

我尝试使用Bootstrap Carousel为animate.css设置动画我finished with caption animation一切正常，但如何为item制作动画 HTML：

<div class="item zoomInLeft animated">
    <img data-src="/images/1.jpg" alt="...">
    <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);
        });
    }

所以我使用active.item data-animation（加上数据延迟）并使用它们制作动画来使用animate an Item中的所有元素。

也可以zoomOutLeft animated bootstrap carousel？

如果我只是添加了类zoomInLeft animated，但在此之前我需要添加.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); } }（例如）谢谢adnvace

更新了问题： @makshh建议

@media all and (transform-3d), (-webkit-transform-3d)

有效但只有在Chrome中可以让它跨浏览器工作，因为我知道transform3d甚至可以在IE10 +中工作

更新：删除<android.support.v7.widget.CardView android:id="@+id/programCardview" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="match_parent" card_view:cardUseCompatPadding="true" xmlns:card_view="http://schemas.android.com/apk/res-auto"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/programHeader" android:layout_width="match_parent" android:layout_height="160dp" android:src="@drawable/createdprogramviewcard"/> <RelativeLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp"> <TextView android:id="@+id/programTitle" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Programme d'endurance" android:textSize="20sp" android:textAlignment="center"/> <TextView android:id="@+id/objectif" android:layout_below="@+id/programTitle" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Objectif : " /> <TextView android:id="@+id/programObjectif" android:layout_below="@+id/programTitle" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="6 séances" android:layout_toRightOf="@id/objectif"/> <TextView android:id="@+id/programWorkouts" android:layout_below="@+id/programTitle" android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAlignment="textEnd" android:layout_alignParentRight="true" android:text="6 séances" /> </RelativeLayout> </LinearLayout>使其在IE10 +（FF，Opera）中正常工作

但问题仍然存在，我们可以整合animate.css + bootstrap轮播。

Answer 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" 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>

CSS（禁用转换，转换，并将左侧设置为0，我还更改了动画持续时间以匹配Bootstrap轮播默认持续时间，如果您想要的值不同于0.6，则必须覆盖{{1}中的Carousel.TRANSITION_DURATION = 600文件并将bootstrap.js更改为你的文件）：

animation-duration

JS（我没有对它进行测试，而且我非常确定它可以得到显着改善）：

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

Bootstrap Carousel过渡项目+ animate.css

1 个答案:

的 CODEPEN