Question

我今天一直在努力解决CSS高度转换问题。我想在我的小项目中的几个地方使用它，但我无法做对......

这是一个小小部件复制我正在处理的解决方案：JSfiddle

点击“这是一个按钮”时，我希望进行高度转换。在点击登录表单之前应该隐藏。当我将表单的高度值设置为0时，它表现得非常奇怪。我查看了一些教程，建议使用max-height，但我仍然会得到尴尬的结果。

当单击“这是一个按钮”并且已经达到表格的整个高度时，它应该将其高度转换为0或者在再次单击上部按钮时消失。

我认为转换表单中的每个元素实际上是一种愚蠢/错误的方法 - 这是我能想到的最后一件事，大声笑......

我没有想法，无法想到在哪里寻找可能的解决方案......

Answer 1

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

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

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

form.expand{
   height:100px;   
}

不幸的是，您需要以单位定义高度 - 使用auto将无效。

现在，您需要添加一些JavaScript。没办法绕过它，样式表对按钮点击没有任何了解：

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

此脚本侦听按钮上的点击，并动态地将expand类添加到表单中，从而触发转换。

如果您不想为此编码高度测量，opacity是一种受欢迎的选择。

http://jsfiddle.net/PNhv5/2/

CSS：无法实现高度转换

1 个答案: