Question

我有以下html和css代码完全按照我的预期运行。

function toggle() {
  var el = document.getElementById("panel");
  el.className = el.className == "expanded" ? "collapsed" : "expanded";
}

.collapsed {
  height: 0px;
}
.expanded {
  height: 500px;
}
#panel {
  overflow: hidden;
  transition: height 1s linear;
}

<p id="panel" class="expanded">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it
  has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search
  for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<button onClick="toggle()">Toggle Panel</button>

单击按钮将向上滑动或向下滑动面板，并具有1秒的高度过渡效果。

但是，如果我用auto，inherit或initial替换展开的高度500px，则高度转换不再生效。面板只是在0px和原始高度之间捕捉。

我计划使用各种长度的文本，并且为每个段落自定义高度是不可行的。是否只有CSS方法仍然可以在没有明确定义面板高度的情况下进行滑动动画？

没有最终状态的CSS高度转换？

0 个答案: