Ken Burns在Twitter Bootstrap Carousel上 [英] Ken Burns on Twitter Bootstrap Carousel
问题描述
如何在Twitter Bootstrap Carousel上应用 Ken Burns效果？
How could I apply a Ken Burns Effect on a Twitter Bootstrap Carousel?
.carousel .item img {
-webkit-transition: all 12s;
-moz-transition: all 12s;
-o-transition: all 12s;
transition: all 12s;
}
...似乎不适用过渡。
... seems not to apply transition.
通过 jsFiddle ...
推荐答案
...似乎不应用过渡。
... seems not to apply transition.
哦，确实如此！您只需从小提琴的CSS代码中删除两个错字即可：
Oh, but it does! You only have to remove two typos from the CSS code of your fiddle:
- a
显示：inline-block;在任何选择器括号之外 - 以注释开头使用
//而不是使用/*...*/
- a
display: inline-block;outside of any selector brackets - a comment starting with
//instead of using/*...*/
这是您的修正的小提琴，效果很好。
只剩下一个问题：
Ken Burns效果仅从第二张幻灯片开始。这是由于以下事实：第一张幻灯片立即以活动类开始，并且没有过渡到该类中。因此，它以scale：1.5（应该是过渡的结束值）开始。
There is only one problem left:
The Ken Burns effect only starts at the second slide. This is due to the fact that the very first slide starts with the "active" class right away and does not transition into it. So it start with scale:1.5 (which should be the end value of the transition).
一种解决方案是使用CSS关键帧动画代替过渡。但是在这种情况下，使用一些JS要容易得多。引导轮播会通过将JS类通过附加/分离类的方式在幻灯片之间进行切换。
A solution could be to use CSS keyframe animations instead of transitions. But in this case it is much easier to use a bit of JS. The bootstrap carousel uses JS anyway to change from slide to slide by attaching/detaching classes to the items.
这里是一个解决方案（也做了一些清理），使用额外的类 inactiveUntilOnLoad ，该类在加载期间抵消了 active 类，并在DOM ready事件中删除，因此过渡将直接从第一张幻灯片：
jsFiddle从第一张幻灯片开始工作
Here is a solution (that is also cleaned up a bit), that uses an additional class "inactiveUntilOnLoad" that neutralizes the "active" class during load time and that is removed at DOM ready event, so the transition will take place right from the first slide:
jsFiddle working from first slide
下划线：
以下是肯伯恩斯的所有更改原始的Bootstrap 3轮播：
CSS更改
为
为定义启动状态。carousel.item img ，
定义 .carousel .item.active img 的结束状态，
还添加选择器 .carousel .item.active.inactiveUntilOnLoad img 定义开始状态以创建第一帧的动画。
CSS changes
Define transition for .carousel .item img,
define start status for .carousel .item img,
define end status for .carousel .item.active img,
also add selector .carousel .item.active.inactiveUntilOnLoad img to definition of start status to create animation of first frame.
/* transition */
.carousel .item img {
-webkit-transition: all 5s;
-moz-transition: all 5s;
-o-transition: all 5s;
transition: all 5s;
}
/* start status */
.carousel .item img,
.carousel .item.active.inactiveUntilOnLoad img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* end status */
.carousel .item.active img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
HTML更改
将类 .inactiveUntilOnLoad 添加到第一个（活动的）项目中。
HTML changes
Add class .inactiveUntilOnLoad to first (active) item.
<div class="item active inactiveUntilOnLoad">
JS更改
将代码添加到DOM ready事件，以删除类 .inactiveUntilOnLoad 。
$(function() {
$('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad');
});
这篇关于Ken Burns在Twitter Bootstrap Carousel上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
