How can I animate or transition CSS when a class is added with jquery

Question

I've tried multiple examples but for some reason my CSS just won't animate. CSS keyframes worked but I am adding and removing a class to resize a logo when scrolling down. With keyframes it resizes to a smaller logo when scrolling down, but jumps immediately back to big when scrolling back up again.

This is my code:

Logo html:

<div class="col-lg-3 col-md-2 col-sm-6 col-xs-5">
    <a class="logolink" href="#"><img src="asset/img/logo-white.png" alt=""></a>
</div>

My jQuery:

if ($(this).scrollTop() > 50) {
    $('.logolink img').addClass('logo-small');
} else {
    $('.logolink img').removeClass('logo-small');
}

And my CSS:

.logolink{
  position: relative;
  display: inline-block;
}

.logo-small{
  max-height:100px;
}

I've tried adding transition: height 2s; or transition: max-height 2s; to .logo-small but this doesn't work. What is the correct way to do this?

Could this post help you out? stackoverflow.com/questions/12558311/… — Makis Milas
– Makis Milas, Commented Jun 29, 2020 at 12:26
@MakisMilas The problem is not adding and removing the class, this works fine. But now it is instant, I would like it to be smooth, transitioning between the small and big size. — twan
– twan, Commented Jun 29, 2020 at 12:28

Ahmed Tag Amer · Accepted Answer · 2020-06-29 12:29:04Z

1

Is this what you trying to do ?

$(document).on("scroll",function(){
if ($(this).scrollTop() > 50) {
    $('.logolink img').addClass('logo-small');
} else {
    $('.logolink img').removeClass('logo-small');
}
});

body{
  height:200vh;
}

.logolink{
  position: fixed;
  top:0;
}

.logolink img{
  height:300px;
  transition-duration:0.5s;
}

.logo-small{
  height:100px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-2 col-sm-6 col-xs-5">
    <a class="logolink" href="#"><img src="https://picsum.photos/id/237/200/300" alt=""></a>
</div>

answered Jun 29, 2020 at 12:29

Ahmed Tag Amer

1,4221 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I animate or transition CSS when a class is added with jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related