AddClass & removeClass Transitions - Firefox

Question

EDIT: Fixed a text issue, still need help navigating Firefox.

Trying to use the minimum menu after scrolling down the page. The code works in the sense that it passes, but it does not pass as I would like. There are two problems:

• In Chrome, the text "slides" to the middle only after moving everything else.
• In Firefox, the image does not fade in / out, it just “opens” to the right.

In an ideal situation, I want the image to animate like in Chrome, but I want the text to slide to the right position, like in Firefox.

I looked at other questions about Stackoverflow and other places, but none of them have a solution for the differences between Webkit and Moz.

jsFiddle problems.

Try the following:

$(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

Remove the transitions from header, a, img, li{... and add to the actual elements:

 .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

If these are your two states, you can avoid the problem by creating a permanent class and an overlay class and applying your styles to them, for example:

 .logo { } .logo.minimized { } 

Just add and remove an overlay style.

This should allow jQuery to correctly calculate the transition.