Jquery 在addClass和removeClass之间实现转换效果

想知道是否有办法用上述jquery逻辑实现转换？在添加或删除类之间

我尝试了下面的方法，但没有成功：（这是一个简单的div小高度>大高度切换）

另外：

---

将

转换

应用于

.greenbox

类，而不是要添加和删除的两个类中的任何一个：

.contracted {
    height: 100px;
}

话虽如此，您不能在CSS中转换到或从

auto

值进行转换，因此，您希望在这里使用的技巧是将扩展类的

max height

设置为一个大于其内容所能达到的高度的值，并进行转换

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

根据为较大的

最大高度设置的值，您可能需要调整过渡的时间以改善其外观

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

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

看起来您可以简化JavaScript，只需要切换一个类。您不能使用CSS将动画设置为“自动”，因为它不知道这意味着什么，但您可以使用“最大高度”来欺骗它。。。你必须任意选择，尽量接近普通尺寸。否则，您必须使用jqueryanimate（或velocity）并查询高度，以便知道要设置动画的整数，然后将CSS转换保留在外

jQuery


CSS
这完全取决于这些类应用的样式。根据这一点，理论上你可以单独在CSS中实现。切换高度。
.contracted
类是什么样子的？Headsup：你不能转换到CSS中的
自动
值。此外，您还需要两种状态才能使转换生效，并且您还没有设置
转换
属性。您需要在CSS中指定
转换
设置。尽管如此，正如@LuudJacobs所说，您无法从/转换到
height:auto
，因此您需要处理具体的尺寸。这里有一个只使用CSS的演示：你必须有一个
height:Npx也是。对于宽度，您可以添加100%的宽度，但高度有点古怪-因为DOM通常不知道
100%
的意思。。。100%什么？等。在何处添加高度高度：Npx？这可能令人困惑。我的意思是
N
作为占位符。在我的示例中，我定义了长方体的高度。
.greenbox{
    transition:height .5s linear;
}

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

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

$('.greenBox').hover( function() {
    $(this).addClass('expanded');
}, function() {
    $(this).removeClass('expanded');
});

.greenbox {
  height: 864572px;
  max-height: 100px;
  transition: .2s; 
}

.greenbox.expanded {
  max-height: 500px
}