Javascript 如何在单击工作时获得简单的最大高度转换？

我试图通过JavaScript从max height:0转换到由其中的内容确定的max height

目前，它只是打开和关闭没有过渡。在不使用jQuery的情况下，平滑的打开和关闭转换是理想的效果

这是一个测试

var isOpen=false；
函数切换（）{
等参=！等参；
var container=document.querySelector（'.div body'）；
container.style.maxHeight='none'；
var containerHeight=window.getComputedStyle（container）.height；
container.style.maxHeight=0；
控制台日志（集装箱重量）；
控制台日志（isOpen）；
如果（等参线===真）{
container.style.maxHeight=containerHeight；
}否则{
container.style.maxHeight=0；
}
}

.info卡{
背景：#ccc；
填充：10px 20px；
宽度：600px；
}
.div标题{
光标：指针；
}
.分区议会{
最大高度：0；
溢出：隐藏；
过渡：最大高度300毫秒；
}

点击
身体

身体

身体

基本上，删除高度限制以获得计算的样式是有意义的，但当您在一个javascript框架中多次更改样式时，浏览器最终很难确定转换。因此，我添加了

setImmediate

以在一帧后进行转换（类似于setTimeout（…，0）

---

基本上，删除高度限制以获得计算的样式是有意义的，但当您在一个javascript帧中多次更改样式时，浏览器最终很难确定转换。因此，我添加了

setImmediate

以在一帧后进行转换（类似于setTimeout（…，0）.

简单的方法是从

max height:0

设置动画到

max height:auto

，但是，显然这是不可能的。我们可以仅使用CSS将动画设置为任何有效的

max height

，但由于您想要使用容器的高度，我们必须依赖javascript来获得所需的值

值得一提的是，您应该小心使用类选择器，如

.div body

，因为它们会将DOM中的每个元素与该类匹配。例如，在页面中有多个面板的情况下，这可能会很危险

例子

函数getHeight（elm）{
var elmStyle=getComputedStyle（elm）；
返回parseInt（elmStyle.height）+parseInt（elmStyle.paddingTop）+parseInt（elmStyle.paddingBottom）；
}
功能切换（elm）{
var card=elm.parentNode，
content=card.querySelector（“.panel content”），
contentWrapper=content.querySelector（'.panel content wrapper'），
contentHeight=getHeight（contentWrapper）；
content.classList.toggle（'open'）；
if（content.classList.contains（'open'））{
content.style.maxHeight=contentHeight+'px'；
}否则{
content.style.maxHeight=0；
}
}

正文{
背景：#9BA7B6；
利润率：25px；
}
.小组{
字体系列：Arial、Helvetica、无衬线字体；
宽度：400px；
边界半径：6px；
盒影：0.02×rgba（0,0,0,4）；
}
.面板标题{
填充：10px；
文本对齐：居中；
光标：指针；
边框底部：1px实心#9494；
边界半径：6px 6px 0；
背景：线性梯度（#D9D9D9，#B1B1B1）；
}
.小组内容{
背景：#EDEDED；
最大高度：0；
溢出：隐藏；
过渡：最大高度.5s；
边界半径：0 0 6px 6px；
}
.面板内容包装器{
填充：10px；
}

面板标题（单击以切换）
这是我的面板内容
这是我的面板内容
这是我的面板内容
这是我的面板内容

简单的方法是从

max height:0

设置动画到

max height:auto

，但是，显然这是不可能的。我们可以仅使用CSS将动画设置为任何有效的

max height

，但由于您想要使用容器的高度，我们必须依赖javascript来获得所需的值

值得一提的是，您应该小心使用类选择器，如

.div body

，因为它们会将DOM中的每个元素与该类匹配。例如，在页面中有多个面板的情况下，这可能会很危险

例子

函数getHeight（elm）{
var elmStyle=getComputedStyle（elm）；
返回parseInt（elmStyle.height）+parseInt（elmStyle.paddingTop）+parseInt（elmStyle.paddingBottom）；
}
功能切换（elm）{
var card=elm.parentNode，
content=card.querySelector（“.panel content”），
contentWrapper=content.querySelector（'.panel content wrapper'），
contentHeight=getHeight（contentWrapper）；
content.classList.toggle（'open'）；
if（content.classList.contains（'open'））{
content.style.maxHeight=contentHeight+'px'；
}否则{
content.style.maxHeight=0；
}
}

正文{
背景：#9BA7B6；
利润率：25px；
}
.小组{
字体系列：Arial、Helvetica、无衬线字体；
宽度：400px；
边界半径：6px；
盒影：0.02×rgba（0,0,0,4）；
}
.面板标题{
填充：10px；
文本对齐：居中；
光标：指针；
边框底部：1px实心#9494；
边界半径：6px 6px 0；
背景：线性梯度（#D9D9D9，#B1B1B1）；
}
.小组内容{
背景：#EDEDED；
最大高度：0；
溢出：隐藏；
过渡：最大高度.5s；
边界半径：0 0 6px 6px；
}
.面板内容包装器{
填充：10px；
}

面板标题（单击以切换）
这是我的面板内容
这是我的面板内容
这是我的面板内容
这是我的面板内容

var isOpen = false;
function toggle () {
  isOpen = !isOpen;
    var container = document.querySelector('.div-body');


    var containerHeight = 0;
    if (isOpen) {
      container.style.maxHeight = 'none';
      containerHeight = window.getComputedStyle(container).height;
      container.style.maxHeight = 0;
    }

  console.log(containerHeight);
  console.log(isOpen);
  setImmediate(function() {

    if(isOpen) {
      container.style.maxHeight = containerHeight;
    } else {
      container.style.maxHeight = '0px';
    }
    });
  }