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過渡 - >翻譯

回答

相關問題