CSS mozilla過渡不起作用

Question

我有一個簡單的過渡來將頁腳img向上移動5px，但平滑過渡，但Firefox不適用平滑過渡。只有webkit。

我已經正確聲明所有供應商前綴如下。

#footer img { 
     margin-left:8px; 
     -webkit-transition:all .1s ease; 
     -moz-transition:all .1s ease; 
     -ms-transition:all .1s ease; 
     transition:all .1s ease; 
     cursor:pointer; 

#footer img:hover { 
    position:relative; 
    top:-5px; 

可以在Safari /鉻VS Firefox的檢查自己。轉到頁腳並將鼠標懸停在每個項目上。

www.rjam.es

Answer 1

火狐似乎需要先設置一個初始值。即使它是0。

#footer img { 
    margin-left:8px; 
    -webkit-transition:all .1s ease; 
    -moz-transition:all .1s ease; 
    -ms-transition:all .1s ease; 
    transition:all .1s ease; 
    cursor:pointer; 
    position:relative; 
    top:0; 
} 

#footer img:hover { 
    top:-5px; 
} 

Answer 2

雖然皮埃爾的回答以前對我有用，但我最近偶然發現了一個沒有的情況。實現一個簡單的循環圖像滑塊，我使用以下內容。

HTML：

<ul id="slides"> 
    <li class="active"> 
     <img src="/.../0.jpg"> 
     <p>Caption</p> 
    </li> 
    <li class="active"> 
     <img src="/.../1.jpg"> 
     <p>Caption</p> 
    </li> 
    <!-- and so on --> 
</ul> 

CSS：

#slides { 
    position: relative; 
} 
#slides li { 
    position: absolute; 
    top: 0; 
    display: none; 
    opacity: 0; 
    -moz-transition: opacity 1s; 
} 
#slides li.active { 
    display: block; 
    opacity: 1; 
} 

和jQuery：

$(function(){ 
    animateSlide(); 
}); 

function animateSlide(){ 
    setTimeout(function(){ 
     var current = $('#slides li.active'); 
     var next = current.next(); 

     // If there is no next, use the first li 
     if(!next.length){ 
      next = $('#slides li:first'); 
     } 

     // Ensure both are displayed as block, to allow the opacity transition to show 
     current.add(next).css('display', 'block'); 
     current.removeClass('active'); 

     setTimeout(function(){ 
      next.addClass('active'); 
      setTimeout(function(){ 
       current.css('display', 'none'); // Avoid elements overlapping each other 
       animateSlide(); // Loop 
      }, 1000); // The duration of the transition 
     }, 1); // Workaround for letting the "next" var to render as block properly before applying the class which triggers the transition 
    }, 6000); // Change image every 6 seconds 
} 

這個工作在Safari /鉻很大（雖然我承認所有的setTimeout小號有點奇特， ），但是當滑塊技術上在Firefox中工作時，沒有可見的轉換那裏。

繼Jim Jeffers' answer to a similar problem後，我在Safari/Chrome和Firefox中都能夠順利運行，並且它也大幅清理了我的javascript。

更新CSS：

#slides li { 
    position: absolute; 
    top: 0; 
    height: 0; 
    opacity: 0; 
    -moz-transition: opacity 1s; 
} 
#slides li.active { 
    height: auto; 
    opacity: 1; 
} 

更新的jQuery：

function animateSlide(){ 
    setTimeout(function(){ 
     var current = $('#slides li.active'); 
     var next = current.next(); 

     // If there is no next, use the first li 
     if(!next.length){ 
      next = $('#slides li:first'); 
     } 

     current.removeClass('active'); 
     next.addClass('active'); 
     animateSlide(); // Loop 
    }, 6000); // Change image every 6 seconds 
}