肯伯恩斯在推特引导轮播答案

【问题标题】：Ken Burns on Twitter Bootstrap Carousel肯伯恩斯在推特引导轮播
【发布时间】：2013-09-30 08:19:53
【问题描述】：

我如何在 Twitter 引导轮播上应用 Ken Burns Effect？

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

...似乎没有应用过渡。

通过jsFiddle查看它的实际应用...

【问题讨论】：

你有什么运气吗？我看不到它在小提琴上工作？

标签： twitter-bootstrap carousel transition effect

【解决方案1】：

...似乎没有应用过渡。

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

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

这是您的corrected fiddle，效果很好。

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

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

这是一个解决方案（也被清理了一点），它使用了一个额外的类“inactiveUntilOnLoad”，它在加载时中和了“active”类，并且它在 DOM 就绪事件中被移除，因此转换将从第一张幻灯片开始：
jsFiddle working from first slide

底线：

以下是“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');
});

【讨论】：

【解决方案2】：

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

<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" />

【讨论】：

【解决方案3】：

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

【讨论】：