Question

所以我正在使用Bootstrap，我几乎已经完成了所有工作，但我无法让我的旋转木马在标题上进行过渡。旋转木马内部的过渡工作正常，但我希望标题从顶部或底部滑入并淡入。它在IE10 / 11和Webkit中运行。但标题转换在FF中不起作用。当我用Firebug手动“开始”转换，即打开和关闭不透明度值时，它确实有效。我唯一能找到google-ing等的东西就是你需要定义默认值。所以我检查了三次，我很确定所有默认值都已定义。任何人都知道它为什么不起作用？我猜我忘记了什么？

PS：我尝试过使用不同的样式进行转换，但没有一种可以工作（margin-top，top和更多）。我正在使用翻译，所以过渡在手机/平板电脑上顺利进行。

这是我的轮播代码：

/*== Carousel transition ==*/
.carousel-inner > .item {
    display: none;
    width: 100%;
    position: relative;
    -webkit-transition: 1s ease-out -webkit-transform;   /* If the time is changed it also needs to be changed @ bootstrap.js -> line 359 */
    transition: 1s ease-out transform;
}
.carousel-inner > .item > img {
    width: 55%; /* Too make it fit next to side-items */
}
.carousel-inner > .item > .carousel-caption {
    opacity: 0;
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-duration: 0.5s, 0.6s;
    transition-timing-function: ease, ease-out;
    transition-delay: 0s, 0.5s;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .active > .carousel-caption {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .next > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .prev {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .prev > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .next.left > .carousel-caption,
.carousel-inner > .prev.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .active.left {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.left > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .active.right {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
/*== Carousel transition ==*/

我做了一个小提琴，但我没有得到正确的工作：http://jsfiddle.net/Rudi91/sp3Nc/2/

Answer 1

检查我的代码20次以上并放弃我不会与网站的其余部分。当我不得不改变旋转木马控件的位置时，我注意到我已经在默认样式表中声明的左右类。事实证明你不能用Firefox转换浮动元素，至少不是完美的。将我的左班改为floatLeft，现在一切正常。因此，如果有人在Firefox中有错误的过渡，请尝试检查是否有任何浮动元素并通过其他方法定位它们。

Firefox转换 - ＆gt;翻译

1 个答案: