1

谁能给我一个示例，说明如何使用 css3 进行动画处理，典型引导轮播中的元素？

我想要这种效果（bsstc.com.au）。我知道这是一种不同类型的滑块，但它里面的动画是我所追求的。

我知道有一类 (.active) 添加到滑块中当前的项目但是当我做这样的事情时：

.slide-one .item-one {
-webkit-transition: all .6s ease-in 0s;
-moz-transition: all .6s ease-in 0s;
-ms-transition: all .6s ease-in 0s;
-o-transition: all .6s ease-in 0s;
transition: all .6s ease-in 0s;
margin:100px 0 0 0;
}
.slide-one.active .item-one {margin:0;}

它适用于 Chrome，仅此而已。我缺少更好的方法或不同的方法吗？

这是html...

    <div id="carousel-1" class="carousel slide carousel-fade hidden-phone">
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item slide-one active">
            <div class="container">
                <img class="item-one" src="/image/guitar.png" alt="" />
                <img class="item-two" src="/image/featured-one.jpg" alt="" />
                <a href="#">b</a>
            </div>
        </div>
        <div class="item slide-two"><a href="#">a</a></div>
        <div class="item slide-three">c</div>
    </div>
    <a class="carousel-control left" href="#carousel-1" data-slide="prev">‹&lt;/a>
    <a class="carousel-control right" href="#carousel-1" data-slide="next">›&lt;/a>
</div><!-- carousel -->
<script>
    $('#carousel-1').carousel({
        interval:6000
    });
</script>
4

1 回答 1

1

它太旧了，但如果有人仍然在这里寻找答案，那就是：

HTML

        <div class="container main-container">

          <h1>Bootstrap Carousel with Animate.css</h1>
            <div id="carousel-example-generic" class="carousel slide">
              <!-- 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>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">

                <!-- First slide -->
                <div class="item active deepskyblue">

                  <div class="carousel-caption">
                    <h3 data-animation="animated bounceInLeft" data-delay="1000" data-dur="1000">
                      This is the caption for slide 1
                    </h3>
                    <h3 data-animation="animated bounceInRight" data-delay="2000" data-dur="1000">
                      This is the caption for slide 1
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp"  data-delay="3000" data-dur="1000">Button</button>
                  </div>
                </div> <!-- /.item -->

                <!-- Second slide -->
                <div class="item skyblue">
                  <div class="carousel-caption">
                    <h3 class="icon-container" data-animation="animated bounceInDown" data-delay="1000" data-dur="1000">
                      <span class="glyphicon glyphicon-heart"></span>
                    </h3>
                    <h3 data-animation="animated bounceInUp" data-delay="2000" data-dur="1000">
                      This is the caption for slide 2
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated zoomInRight" data-delay="3000" data-dur="1000">Button</button>
                  </div>
                </div><!-- /.item -->

                <!-- Third slide -->
                <div class="item darkerskyblue">
                  <div class="carousel-caption">
                    <h3 class="icon-container" data-animation="animated zoomInLeft" data-delay="1000" data-dur="1000">
                      <span class="glyphicon glyphicon-glass"></span>
                    </h3>
                    <h3 data-animation="animated flipInX" data-delay="2000" data-dur="1000">
                      This is the caption for slide 3
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn" data-delay="3000" data-dur="1000">Button</button>
                  </div>
                </div><!-- /.item -->

              </div><!-- /.carousel-inner -->

              <!-- 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><!-- /.carousel -->

        </div><!-- /.container -->

CSS

.main-container {
    padding: 10px 15px;
}
.skyblue {
    background-color: #22c8ff;
}
.deepskyblue {
    background-color: #00bfff;
}
.darkerskyblue {
    background-color: #00a6dd;
}
.carousel-indicators {
    bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
}
.carousel .item {
    min-height: 350px; 
    height: 100%;
    width:100%; 
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
    background-color: #09c;
}
.carousel-caption h3 {
    padding: .5em;
}
.carousel .icon-container {
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    padding: 1em;
    text-align: center;
    border-radius: 50%;
}
.carousel-caption button {
    border-color: #00bfff;
    margin-top: 1em; 
}

h1 {
    text-align: center;  
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: bold;
}

.p {
    padding-top: 125px;
    text-align: center;
}

.p a {
    text-decoration: underline;
}

JS

    (function( $ ) {

        //Function to animate slider captions 
        function doAnimations( elems ) {
            //Cache the animationend event in a variable
            var animEndEv = 'webkitAnimationEnd animationend';

            elems.each(function () {
                var $this = $(this),
                    $animationType = $this.data('animation');
            // requires you add [data-delay] & [data-dur] in markup. values are in ms
            $animDur = parseInt($this.data('dur'));
            $animDelay = parseInt($this.data('delay'));

                $this.css({"animation-duration": $animDur + "ms", "animation-delay": $animDelay + "ms", "animation-fill-mode": "both"}).addClass($animationType).one(animEndEv, function () {
                    $this.removeClass($animationType);
                });
            });
        }

        //Variables on page load 
        var $myCarousel = $('#carousel-example-generic'),
            $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

        //Initialize carousel 
        $myCarousel.carousel();

        //Animate captions in first slide on page load 
        doAnimations($firstAnimatingElems);

        //Pause carousel  
        $myCarousel.carousel('pause');


        //Other slides to be animated on carousel slide event 
        $myCarousel.on('slide.bs.carousel', function (e) {
            var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
            doAnimations($animatingElems);
        });  

    })(jQuery);
于 2015-06-02T16:43:47.650 回答