addClass & removeClass Transitions - Firefox

Question

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: - In Chrome the text "slides" to the middle only after everything else has moved. - 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. 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(…

Accepted Answer

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

addClass & removeClass Transitions - Firefox

Solution

Problem