addClass和removeClass过渡 - 火狐浏览器

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>

- Black Bird

Answer 1

将

、、和

的过渡效果移除，并添加到实际元素中：

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

- Ilia Frenkel

---

点赞因为它修复了Chrome问题（文本正在正确过渡），但它没有修复Firefox的问题。 :( - Black Bird

Answer 2

如果这是你唯一的两种状态，你可以通过创建一个持久类和一个覆盖类来避免问题，并将样式应用于这些类，例如：

.logo { }
.logo.minimized { }

只需添加或移除覆盖样式。

这样可以使jQuery正确计算过渡效果。

- shannon