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

【问题标题】：How can I animate or transition CSS when a class is added with jquery使用 jquery 添加类时如何为 CSS 设置动画或过渡
【发布时间】：2020-06-29 20:29:04
【问题描述】：

我尝试了多个示例，但由于某种原因，我的 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，但这不起作用。这样做的正确方法是什么？

【问题讨论】：

在.logolink中添加max-height:0;
这篇文章能帮到你吗？ stackoverflow.com/questions/12558311/…
@MakisMilas 问题不在于添加和删除类，这很好用。但现在它是即时的，我希望它是平滑的，在小尺寸和大尺寸之间过渡。
@KunalAwasthi 这没用。

标签： javascript html jquery css

【解决方案1】：

这是你想要做的吗？

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

【讨论】：