addClass＆removeClass Transitions - Firefox

Question

編輯：解決了文本問題，仍然需要Firefox轉換幫助。

嘗試在向下滾動頁面時使用最小化菜單。代碼的工作原理是它正在轉換，但是它並不像我希望的那樣轉換。有兩個問題：

1. 在Chrome中，只有在其他所有內容移動後，文本纔會「滑動」到中間位置。
2. 在Firefox中，圖像不會過渡/淡入淡出，它只是從右側「打開」。

在理想的情況下，我希望圖像在Chrome中具有動畫效果，但我希望文本像在Firefox中一樣滑動到位。

我已經在Stackoverflow和其他地方查找過其他問題，但似乎沒有解決Webkit & Moz之間的差異的解決方案。

jsFiddle的問題。

試試這個：

$(document).on("scroll",function(){ 
 
     if($(document).scrollTop()>100){ 
 
      $(".logo").removeClass("logo_large").addClass("logo_small"); 
 
      $("header").removeClass("large").addClass("small"); 
 
      } 
 
     else{ 
 
      $(".logo").removeClass("logo_small").addClass("logo_large"); 
 
      $("header").removeClass("small").addClass("large"); 
 
      } 
 
     });

.small li, .large li, .logo_large, .logo_small { 
 
    transition: all 1s; 
 
    -moz-transition: all 1s; /* Firefox 4 */ 
 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
 
    -o-transition: all 1s; /* Opera */ 
 
} 
 

 
nav { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
ul { 
 
    display:inline-table; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display:table-cell; 
 
    float: left; 
 
    text-align: center; 
 
    margin-right: 30px; 
 
} 
 

 
.large li { 
 
    height: 120px; 
 
    line-height: 120px; 
 
} 
 

 
.small li { 
 
    height: 70px; 
 
    line-height: 70px; 
 
} 
 

 
.logo_large { 
 
    height: 130px; 
 
    width: 164px; 
 
    background:url(https://unsplash.it/200/300) no-repeat; 
 
} 
 

 
.logo_small { 
 
    height: 80px; 
 
    width: 50px; 
 
    background:url(https://unsplash.it/200/300) no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<header class="large"> 
 
    <nav> 
 
     <ul> 
 
      <li><a class="active" href="#">Home</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Portfolio</a></li> 
 
      <li class="logo logo_large"></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</header>

Answer 1

從header, a, img, li{...刪除過渡和添加到實際元素：

.large li { 
    height: 120px; 
    line-height: 120px; 
    transition: all 1s; 
    -moz-transition: all 1s; /* Firefox 4 */ 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
    -o-transition: all 1s; /* Opera */ 
} 

.small li { 
    height: 70px; 
    line-height: 70px; 
    transition: all 1s; 
    -moz-transition: all 1s; /* Firefox 4 */ 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
    -o-transition: all 1s; /* Opera */ 
} 

.logo_large { 
    height: 130px; 
    width: 164px; 
    background:url(http://samaradionne.com/img/typeBlack.png) no-repeat; 
    transition: all 1s; 
    -moz-transition: all 1s; /* Firefox 4 */ 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
    -o-transition: all 1s; /* Opera */ 
} 

.logo_small { 
    height: 80px; 
    width: 50px; 
    background:url(http://samaradionne.com/img/logoBlack.png) no-repeat; 
    transition: all 1s; 
    -moz-transition: all 1s; /* Firefox 4 */ 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
    -o-transition: all 1s; /* Opera */ 
} 

Answer 2

如果這些是你只有兩種狀態，你可以通過創建一個持久化類和覆蓋類，並運用你的風格，以這些避免這個問題，例如：

.logo { } 
.logo.minimized { } 

只需添加和刪除疊加樣式即可。

這應該允許jQuery正確計算轉換。