jquery - 实现addClass和removeClass之间的过渡效果

Question

$('.greenBox').hover(function(){
    $(this).addClass('expanded');
    $(this).removeClass('contracted');
}, function(){
    $(this).removeClass('expanded');
    $(this).addClass('contracted');
}); // end of hover state for green box

想知道是否有一种方法可以使用上述 jquery 逻辑实现转换？在类的添加或删除之间。

我试过下面的方法，但没有用:(这是一个简单的 div small height > large height toggle)

.expanded {
    height: auto;
    // to make the box move up add back the bottom 300px
    // bottom: 300px;
    background: linear-gradient(#812990, #9e248e);
    -webkit-transition-timing-function: linear; 
    transition-timing-function: linear; 
}

还有:

.contracted {
    height: 100px;
}

Answer 1

将 transition 应用于您的 .greenbox 类，而不是您要添加和删除的两个中的任何一个:

.greenbox{
    transition:height .5s linear;
}

话虽如此，您不能在 CSS 中转换到或从 auto 值转换，因此，您在这里要使用的技巧是设置 max-height将扩展类的值设置为大于其内容所能达到的高度的值，并将其转换为替代。

.greenbox{
    transition:max-height .5s linear;
}
.contracted{
    max-height:100px;
}
.expanded{
    max-height:1000px;/* adjust to suit your content */
}

根据您为较大的 max-height 设置的值，您可能需要调整转换的时间以改善它的外观。

顺便说一句，您可以完全使用 CSS 实现这一点，完全不需要任何 JavaScript，如下所示:

.greenbox{
    max-height:100px;
    transition:max-height .5s linear;
}
.greenbox:hover{
    max-height:1000px;/* adjust to suit your content */
}