滑入引导轮播标题

slide in bootstrap carousel caption

本文关键字：标题      更新时间：2023-09-26

嗨，参考这个答案引导轮播字幕动画我想对 Animate.css.我想在轮播滑动时添加类 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();
});

您可以使用：

$('.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/

相关文章：