CSS transition won't work on adding class

Question

I'm trying to make my element change size on scroll the following way:

<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;
    }
}

I can't tell why but the transition styling I've add is not taking any effect , I tried to play with it and add it to every possible element with changing style , but there was no result at all ... What should I try?

Welcome to SO. Have you confirmed first that your callback is firing? — Mitya
– Mitya, Commented Mar 14, 2020 at 14:25
You can use @keyframes CSS function for animation effect on add class. — Raeesh Alam
– Raeesh Alam, Commented Mar 14, 2020 at 14:31
@Utkanos yes , my script is working if that is what you mean. — survey money
– survey money, Commented Mar 14, 2020 at 14:41

Wai Ha Lee · Accepted Answer · 2020-03-15 11:33:27Z

I think, the problem is with your min-width value in media query and css specificity, you are assigning transition to menu's initial value. May be, that is why, you are not able to see your css changes. otherwise your code is fine.

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>

I'm sorry but maybe my issue was not so understandable :) , the new styling is working well as you show it , but the transition do not work (in your example too)
@surveymoney Oops Sorry, Now you can check the snippet. I made some css changes.
Now I see , style must be defined before the change so the transition will take effect. Thank you!

Collectives™ on Stack Overflow

CSS transition won't work on adding class

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related