Bootstrap Carousel内的动画

Question

我正在寻找一种在bootstrap轮播中提供动画的方法。我正在建立一个活动网站，在旋转木马中我需要提供有关活动的信息（这应该是动画支持的一些文本）。

我有什么方法可以做到这一点。我是初学者。

Answer 1

你必须有办法做到这一点。

选项＃1（js）

使用幻灯片转换完成时触发的slid.bs.carousel事件：

.carousel-caption {
    bottom: 600px;
}

$('#carousel-example-captions').on('slid.bs.carousel', function () {
    $(this).find('.active .carousel-caption').animate(
        {bottom: '20px'},
        '1000'
    );
})

<强> JSFiddle

选项＃2（no-js）

使用CSS3转换，.active类：

.carousel-caption {
    bottom: 600px;
    transition: bottom 1s ease;
}
.active .carousel-caption {
    bottom: 20px;
}

<强> JSFiddle