Bootstrap 轮播过渡项目 + animate.css
Bootstrap Carousel transitions item + animate.css
我正在尝试使用 animate.css
制作 Bootstrap Carousel
动画
我 finished with caption animation
一切正常,但如何为 item
设置动画
HTML:
<div class="item zoomInLeft animated">
<img data-src="/images/1.jpg" alt="...">
<div class="carousel-caption">
<h1 data-animation="bounceInDown" data-delay="400">Lorem Ipsum</h1>
<h3 data-animation="bounceInDown" data-delay="600">Lorem Ipsum</h3>
</div>
</div>
如果有人需要,我的字幕代码 (JS)
function carousel_init(c){
var self = this;
self.carouselAnimations = function (elems) {
elems.each(function (index) {
var el = $(this);
var animEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var animation = el.data('animation')+' animated';
var delay = el.data('delay');
el.attr('style', '-webkit-animation-delay:'+delay+'ms; -moz-animation-delay:'+delay+'ms; -o-animation-delay:'+delay+'ms; animation-delay:'+delay+'ms')
.promise().done(function(){
el.addClass(animation).one(animEnd, function () {
el.removeClass(animation);
});
});
});
}
var carousel = $(c);
var firstElems = carousel.find('.item:first').find('[data-animation]');
carousel.carousel({
interval: 4000,
pause:false,
wrap:true
});
self.carouselAnimations(carousel, firstElems);
carousel.on('slide.bs.carousel', function (e) {
var elems = $(e.relatedTarget).find('[data-animation]');
self.carouselAnimations(elems);
});
}
所以我要遍历 active.item
中的所有元素 data-animation
(加上数据延迟)并为它们设置动画。
- It is possible also to
animate an Item
of bootstrap carousel?
如果我只添加 class zoomOutLeft animated
可以,但在此之前我需要添加 zoomInLeft animated
(例如)
谢谢你提前
更新问题:
@makshh 建议
.home-carousel .carousel-inner > .item {
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.home-carousel .carousel-inner > .item {
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
.home-carousel .carousel-inner> .item.next,
.home-carousel .carousel-inner> .item.active.right {
-webkit-transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
}
.home-carousel .carousel-inner> .item.prev,
.home-carousel .carousel-inner> .item.active.left {
-webkit-transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
}
.home-carousel .carousel-inner> .item.next.left,
.home-carousel .carousel-inner> .item.prev.right,
.home-carousel .carousel-inner> .item.active {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0);
transform: translate3d(0, 0, 0) scale(1) rotate(0);
}
}
有效,但仅在 Chrome 中可以使其跨浏览器工作,因为据我所知,transform3d 即使在 IE10+
中也有效
更新: 删除 @media all and (transform-3d), (-webkit-transform-3d)
使其在 IE10+(FF、Opera)中工作
但问题还是来了,能不能把animate.css+bootstrap轮播整合起来
HTML(没什么特别的,纯粹的Bootstrap):
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/No._23_Post_(Skelmorlie)_Image_3.jpg/640px-No._23_Post_(Skelmorlie)_Image_3.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg/640px-Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Image-Peacock_Springs_Entrance.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Image-of-Sumadija-2.jpg/640px-Image-of-Sumadija-2.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg/640px-Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg" alt="...">
</div>
</div>
<!-- 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>
</div>
</div>
</div>
CSS(禁用过渡、变换,并将 left 设置为 0,我还更改了动画持续时间以匹配 Bootstrap 轮播默认持续时间,如果您想要不同于 0.6s 的值,则必须覆盖 bootstrap.js
文件中的 Carousel.TRANSITION_DURATION = 600
并将 animation-duration
更改为您的):
.item {
transition: none !important;
left: 0 !important;
transform: none !important;
}
.animated {
animation-duration: .6s;
}
JS(我没有测试它,我很确定它可以得到显着改进):
$('#carousel-example-generic').on('slide.bs.carousel', function() {
if ($('.carousel-inner .item:last').hasClass('active')) {
$('.carousel-inner .item:first').addClass('animated zoomInDown');
} else {
$('.item.active').next().addClass('animated zoomInDown');
}
$('.item.active').addClass('animated zoomOutDown');
});
$('#carousel-example-generic').on('slid.bs.carousel', function() {
$('.item').removeClass('animated zoomInDown zoomOutDown')
});
$('.left').click(function () {
if ($('.carousel-inner .item:first').hasClass('active')) {
$('.carousel-inner .item:last').addClass('animated zoomInDown');
} else {
$('.item.active').prev().addClass('animated zoomInDown');
}
});
$('.carousel-indicators > li').click(function () {
$('.item').addClass('animated zoomInDown');
});
CODEPEN
我正在尝试使用 animate.css
制作 Bootstrap Carousel
动画
我 finished with caption animation
一切正常,但如何为 item
设置动画
HTML:
<div class="item zoomInLeft animated">
<img data-src="/images/1.jpg" alt="...">
<div class="carousel-caption">
<h1 data-animation="bounceInDown" data-delay="400">Lorem Ipsum</h1>
<h3 data-animation="bounceInDown" data-delay="600">Lorem Ipsum</h3>
</div>
</div>
如果有人需要,我的字幕代码 (JS)
function carousel_init(c){
var self = this;
self.carouselAnimations = function (elems) {
elems.each(function (index) {
var el = $(this);
var animEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var animation = el.data('animation')+' animated';
var delay = el.data('delay');
el.attr('style', '-webkit-animation-delay:'+delay+'ms; -moz-animation-delay:'+delay+'ms; -o-animation-delay:'+delay+'ms; animation-delay:'+delay+'ms')
.promise().done(function(){
el.addClass(animation).one(animEnd, function () {
el.removeClass(animation);
});
});
});
}
var carousel = $(c);
var firstElems = carousel.find('.item:first').find('[data-animation]');
carousel.carousel({
interval: 4000,
pause:false,
wrap:true
});
self.carouselAnimations(carousel, firstElems);
carousel.on('slide.bs.carousel', function (e) {
var elems = $(e.relatedTarget).find('[data-animation]');
self.carouselAnimations(elems);
});
}
所以我要遍历 active.item
中的所有元素 data-animation
(加上数据延迟)并为它们设置动画。
- It is possible also to
animate an Item
of bootstrap carousel?
如果我只添加 class zoomOutLeft animated
可以,但在此之前我需要添加 zoomInLeft animated
(例如)
谢谢你提前
更新问题: @makshh 建议
.home-carousel .carousel-inner > .item {
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.home-carousel .carousel-inner > .item {
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
.home-carousel .carousel-inner> .item.next,
.home-carousel .carousel-inner> .item.active.right {
-webkit-transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
transform: translate3d(100%, 0, 0) scale(0.5) rotate(8deg);
}
.home-carousel .carousel-inner> .item.prev,
.home-carousel .carousel-inner> .item.active.left {
-webkit-transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
transform: translate3d(-100%, 0, 0) scale(0.5) rotate(-8deg);
}
.home-carousel .carousel-inner> .item.next.left,
.home-carousel .carousel-inner> .item.prev.right,
.home-carousel .carousel-inner> .item.active {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0);
transform: translate3d(0, 0, 0) scale(1) rotate(0);
}
}
有效,但仅在 Chrome 中可以使其跨浏览器工作,因为据我所知,transform3d 即使在 IE10+
中也有效更新: 删除 @media all and (transform-3d), (-webkit-transform-3d)
使其在 IE10+(FF、Opera)中工作
但问题还是来了,能不能把animate.css+bootstrap轮播整合起来
HTML(没什么特别的,纯粹的Bootstrap):
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/No._23_Post_(Skelmorlie)_Image_3.jpg/640px-No._23_Post_(Skelmorlie)_Image_3.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg/640px-Image-Lomnicky_stit_from_Slavkovsky_stit_2.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Image-Peacock_Springs_Entrance.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Image-of-Sumadija-2.jpg/640px-Image-of-Sumadija-2.jpg" alt="...">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg/640px-Image-Great_Swamp_National_Wildlife_Refuge_New_Jersey03.jpg" alt="...">
</div>
</div>
<!-- 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>
</div>
</div>
</div>
CSS(禁用过渡、变换,并将 left 设置为 0,我还更改了动画持续时间以匹配 Bootstrap 轮播默认持续时间,如果您想要不同于 0.6s 的值,则必须覆盖 bootstrap.js
文件中的 Carousel.TRANSITION_DURATION = 600
并将 animation-duration
更改为您的):
.item {
transition: none !important;
left: 0 !important;
transform: none !important;
}
.animated {
animation-duration: .6s;
}
JS(我没有测试它,我很确定它可以得到显着改进):
$('#carousel-example-generic').on('slide.bs.carousel', function() {
if ($('.carousel-inner .item:last').hasClass('active')) {
$('.carousel-inner .item:first').addClass('animated zoomInDown');
} else {
$('.item.active').next().addClass('animated zoomInDown');
}
$('.item.active').addClass('animated zoomOutDown');
});
$('#carousel-example-generic').on('slid.bs.carousel', function() {
$('.item').removeClass('animated zoomInDown zoomOutDown')
});
$('.left').click(function () {
if ($('.carousel-inner .item:first').hasClass('active')) {
$('.carousel-inner .item:last').addClass('animated zoomInDown');
} else {
$('.item.active').prev().addClass('animated zoomInDown');
}
});
$('.carousel-indicators > li').click(function () {
$('.item').addClass('animated zoomInDown');
});