在自举轮播字幕中滑动

Question

嗨，参考这个答案Bootstrap轮播字幕动画，我想对animate.css.i做同样的事情，我想在轮播滑动时添加class 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 /更少

@-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/