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正确计算转换。