twitter-bootstrap - 肯伯恩斯在推特 Bootstrap 轮播

Question

我如何申请 Ken Burns Effect在 Twitter Bootstrap 轮播上？

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

...似乎不适用过渡。

与 jsFiddle 一起查看实际情况...

Answer 1

... seems not to apply transition.

哦，但确实如此! 您只需从 fiddle 的 CSS 代码中删除两个拼写错误:

一个 display: inline-block;在任何选择器括号之外

以 // 开头的评论而不是使用 /*...*/

这是您的 corrected fiddle效果很好。

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

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

这是一个解决方案(也被清理了一点)，它使用了一个额外的类“inactiveUntilOnLoad”，它在加载期间中和了“事件”类，并在 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');
});