Firefox过渡 - >翻译

因此，我使用Bootstrap，几乎所有事情都做完了，但我无法让我的传送带在标题上出现过渡。旋转木马内部的转换工作正常，但我希望标题从顶部或底部滑入并淡入。它在IE10/11和Webkit中工作。但标题转换在FF中不起作用。当我使用Firebug手动“启动”转换时，它可以工作，即打开和关闭不透明度值。我发现thruw谷歌等唯一的事情是你需要有默认值定义。所以我三重检查，我很确定所有的默认值都已定义。任何人都知道为什么它不工作？我猜我忘了宣布什么？ PS：我试过使用不同的风格来过渡，但他们都没有工作（边缘顶部，顶部和一些更多）。我正在使用翻译功能，以便在手机/平板电脑上平稳过渡。Firefox过渡 - >翻译

这里是我的旋转木马代码：

/*== 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/

来源

2014-01-10 Rudi

哪个元素应该使用过渡？你发布了正确的jsfiddle吗？这一个除了在侧面箭头上的悬停效果外什么都没做...... –

文字（标题）可以淡化并从底部滑入。图像可以向左滑出并从左侧滑回。但我似乎无法得到它在小提琴工作（我从来没有做过之前） – Rudi

我很确定它是基于Javascript的在您的网站上，所以你需要将JS代码添加到JS - 小提琴也是。 –

检查我的代码20+次，放弃我文后”与网站的其他部分一起。当我必须改变旋转木马控件的位置时，我注意到我已经在默认样式表中声明的左右类。原来，你不能用Firefox转换浮动元素，至少不是完美的。将我的左班更改为floatLeft，现在一切正常。因此，如果任何人在Firefox中有错误转换，请尝试检查是否有任何浮动元素并通过其他方法对其进行定位。

来源

2014-01-16 07:55:18 Rudi

Firefox过渡 - >翻译

回答

相关问题