Question

嗨参考这个答案 Bootstrap carousel-caption animation 我想对animate.css.i做同样的事情。想要在轮播幻灯片时添加类fadeInRightBig。我如何使用链接

中给出的相同答案来做到这一点

var carouselContainer = $('.carousel');
var slideInterval = 5000;

function toggleCaption() {
    // $('.carousel-caption').hide();
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.delay(500).toggleClass('animated fadeInRightBig');
}


carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid.bs.carousel', function() {
    toggleCaption();
});

Answer 1

您可以使用：

$('.carousel-caption').hide();  
$('.active .carousel-caption').delay(1500).addClass('rotateInDownLeft').show();
$('.carousel').on('slid.bs.carousel', function() {
   $('.carousel-caption').hide();
   $('.carousel-caption').removeClass('rotateInDownLeft');
   $('.active .carousel-caption').offsetWidth = $('.active .carousel-caption').offsetWidth;
   $('.active .carousel-caption').delay(1500).addClass('rotateInDownLeft').show();
});

演示：http://www.bootply.com/36BixvpmOu

css / less

@-webkit-keyframes rotateInDownLeft {
      0% {
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
                transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }

      100% {
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
        -webkit-transform: none;
                transform: none;
        opacity: 1;
      }
    }

    @keyframes rotateInDownLeft {
      0% {
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
                transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }

      100% {
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
        -webkit-transform: none;
                transform: none;
        opacity: 1;
      }
    }

    .rotateInDownLeft {
      -webkit-animation-name: rotateInDownLeft;
              animation-name: rotateInDownLeft;
      -webkit-animation-duration: 0.6s;  
              animation-duration: 0.6s;       
    }

另见：http://css-tricks.com/restart-css-animation/

在引导旋转木马标题中滑动

1 个答案: