7

我如何在 Twitter Bootstrap Carousel 上应用Ken Burns 效果？

.carousel .item img {
-webkit-transition: all 12s;
-moz-transition: all 12s;
-o-transition: all 12s;
transition: all 12s;
}

...似乎不适用过渡。

使用jsFiddle查看它的实际效果...

4

3 回答 3

8

...似乎不适用过渡。

哦，但确实如此！您只需从小提琴的 CSS 代码中删除两个拼写错误：

  • adisplay: inline-block;在任何选择器括号之外
  • //以而不是使用开头的评论/*...*/

这是您正确的小提琴，效果很好。

只剩下一个问题：
Ken Burns 效果仅从第二张幻灯片开始。这是因为第一张幻灯片立即从“活动”类开始，而不是过渡到它。所以它从 scale:1.5 开始（应该是过渡的结束值）。

一个解决方案可能是使用 CSS 关键帧动画而不是过渡。但在这种情况下，使用一点 JS 会容易得多。引导轮播无论如何都使用 JS 通过将类附加/分离到项目来从幻灯片更改为幻灯片。

这是一个解决方案（也被清理了一点），它使用了一个额外的类“ inactiveUntilOnLoad ”，它在加载时中和“活动”类，并在 DOM 就绪事件中被删除，因此转换将直接从第一张幻灯片：
jsFiddle 从第一张幻灯片开始工作

底线：

以下是“Ken Burns”原始 Bootstrap 3 轮播所需的所有更改：

CSS 更改
为 定义过渡，为.carousel .item img定义
开始状态，为.carousel .item img定义
结束状态.carousel .item.active img，
还将选择器添加.carousel .item.active.inactiveUntilOnLoad img到开始状态定义以创建第一帧的动画。

/* 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添加到第一个（活动）项目。

<div class="item active inactiveUntilOnLoad">

JS 更改
将代码添加到 DOM 就绪事件以删除类.inactiveUntilOnLoad。

$(function() {
  $('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad');
});
于 2015-08-05T22:16:57.007 回答
0

更新的 jsFiddle 在这里。只需更新第一张幻灯片的图像源，因为它已从原始源中删除。

<img src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" data-src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" alt="First slide" />
于 2016-03-27T08:46:42.890 回答
0

还有一个 jQuery 插件： https ://github.com/filippovjegor/bootstrap-kenbruns-carousel

于 2016-09-19T21:09:59.547 回答