CSS:无法使高度转换工作

我今天一直在努力解决CSS高度转换问题。 我想在我的小项目中的几个地方使用它，但我不能正确地

下面是一个小部件，它复制了我正在开发的解决方案：

单击“这是一个按钮”时，我希望进行高度转换。单击之前，应隐藏登录表单。当我将窗体的高度值设置为0时，它的行为非常奇怪。我已经阅读了一些教程，其中建议使用

max height

，但我仍然得到了令人尴尬的结果

单击“这是一个按钮”并达到表单的完整高度后，再次单击上方按钮时，应将其高度转换为0或消失

我认为转换表单中的每个元素真的是一个愚蠢/错误的方法-这是我能想到的最后一件事，哈哈

---

我没有主意，无法思考在哪里寻找可能的解决方案…

首先，您需要将表单的高度设置为0，并将其溢出设置为隐藏，以便其内容不会溢出：

form{
 height:0;
 overflow:hidden;
 transition: height 0.3s;
}

现在设置了转换，您需要定义一个类，该类在应用于表单时将触发该转换：

form.expand{
   height:100px;   
}

不幸的是，您需要以单位定义高度-使用“自动”将不起作用

现在，您需要添加一些javascript。无法回避，样式表对按钮单击一无所知：

var btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
    var form = document.querySelector('#login-form');
    form.className = form.className + ' ' + 'expand';
});

此脚本侦听按钮上的单击，并将

expand

类动态添加到表单中，从而触发转换

如果您不想为此编码高度测量值，

opacity

是一种流行的选择

---

既然JS是必需的，你能得到高度，保存到一个变量中，然后将高度设置为0并在单击时修改高度吗？或者这不会触发CSS转换吗？这是一种有效的方法。但是，从可读性/可维护性的角度来看，只要有可能，我更喜欢用javascript而不是样式应用类。如果OP或其他任何人想要使用

auto

，这就是解决方法。nooooooo<代码>自动不起作用。只能通过数字转换。这就是渲染引擎如何实现其转换的魔力。我的意思是，如果有人不想定义高度，并将

自动

渲染高度用于过渡，您可以通过JS获取该值，存储该值，将其设置为0，等等。