CSS过渡在添加类时将无效

Question

我正在尝试通过以下方式使元素在滚动时更改大小：

<script>
    jQuery(function ($) { 
        let menu = $('#menu');
$(document).scroll(function() {
    if($(this).scrollTop() > 0){
        menu.addClass('stickyMenu');
    }else{
    menu.removeClass('stickyMenu');
}
});
    })
</script>

#menu , #menu img , #menu .et_pb_column{
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

@media (min-width: 981px){
    .stickyMenu{
        position: fixed;
        width: 100%;
        height: 90px;
    }

    .stickyMenu .et_pb_column{
        height: 85px;
    }
    .stickyMenu img{
        max-height: 75px;
    }
}

我不知道为什么，但是我添加的过渡样式没有任何效果，我尝试使用它并将其添加到样式更改的每个可能的元素中，但是根本没有结果...我应该尝试什么？

Answer 1

我认为，问题在于您在媒体查询中的最小宽度值和CSS特异性，您正在将转换分配给菜单的初始值。可能就是这个原因，您看不到CSS更改。否则您的代码就可以了。

jQuery(function ($) { 
        let menu = $('#menu');
$(document).scroll(function() {
    if($(this).scrollTop() > 0){
        menu.addClass('stickyMenu');
    }else{
    menu.removeClass('stickyMenu');
}
});
    })

#menu , #menu img , #menu .et_pb_column{
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
  background-color: #f00;
  height: 20px;
}

@media screen and (min-width: 480px){
    #menu.stickyMenu{
        position: fixed;
        width: 100%;
        height: 90px;
    }

    #menu.stickyMenu .et_pb_column{
        height: 85px;
    }
    #menu.stickyMenu img{
        max-height: 75px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
    <div class="et_pb_column">Hello World</div>
  </div>
  <div id="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
  </div>