Firefox 转换 -> 翻译答案

【问题标题】：Firefox transition -> translateFirefox 转换 -> 翻译
【发布时间】：2014-01-16 15:55:18
【问题描述】：

所以我正在使用 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/

【问题讨论】：

哪个元素应该使用过渡？你发布了正确的jsfiddle吗？这个只对侧箭头产生悬停效果......
文本（标题）应该从底部淡入并滑入。并且图像应该向左滑出并从左侧滑回。但我似乎无法让它在小提琴中工作（我以前从未做过）
我很确定它是基于您的网站的 Javascript，因此您还需要将该 Javascript 代码添加到 JS-fiddle 中。
过渡实际上是纯 CSS，我已经包含了引导 js 和 css。 Bootstrap js 更改了类，因此转换将触发。可能做错了什么，不知道 jsfiddle 是如何处理外部文件的
看起来我忘了选择 jQuery.... 我的错。它现在正在工作。看到 Chrome 和 Firefox 的区别了吗？

标签： html css twitter-bootstrap firefox

【解决方案1】：

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

【讨论】：