Question

我尝试了多个示例，但由于某种原因，我的CSS不能动画。 CSS keyframes工作正常，但我要添加和删除一个类，以在向下滚动时调整徽标的大小。使用keyframes时，当向下滚动时，它会调整为较小的徽标，但再次向上滚动时，它会立即跳回到较大的徽标。

这是我的代码：

徽标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>

我的jQuery：

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

还有我的CSS：

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

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

我尝试将transition: height 2s;或transition: max-height 2s;添加到.logo-small，但这不起作用。正确的方法是什么？

Answer 1

这是您要做什么吗？

tesseract-ocr
tesseract-ocr-all
libsm6
libxext6
libxrender-dev
python-qt4

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

使用jquery添加类时如何为CSS设置动画或过渡CSS

1 个答案: