Black Bird Black Bird - 1 month ago 7
HTML Question

addClass & removeClass Transitions - Firefox

EDIT: Resolved the text issue, still need help with the Firefox transition.

Trying to use a minimal menu once you scroll down the page. The code works in the sense that it is transitioning, however it is not transitioning as I would like it to. There are two problems:


  1. In Chrome the text "slides" to the middle only after everything else has moved.

  2. In Firefox, the image doesn't transition/fade, it just simply "opens up" from the right.



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

To better illustrate I created a short video of the effects incase you aren't able to repeat the transition. First example is Chrome, second is Firefox.

I have looked up other questions on Stackoverflow and elsewhere, but none seem to have a solution for the differences between Webkit & Moz.

jsFiddle of the problem.

Try this:



$(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(http://samaradionne.com/img/typeBlack.png) no-repeat;
}

.logo_small {
height: 80px;
width: 50px;
background:url(http://samaradionne.com/img/logoBlack.png) no-repeat;
}


<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 Source

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 */
}