要实现折叠和展开动画，可以使用CSS的max-height属性和transition属性来实现，而不需要使用height属性。

以下是一个示例代码，展示了如何使用max-height属性和transition属性来实现折叠和展开动画：

HTML:

  
这是要折叠和展开的内容。

点击折叠/展开

CSS:

.collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.collapse p {
  margin: 0;
}

.expanded {
  max-height: 500px; /* 设置一个足够大的值，以展开内容 */
}

JavaScript:

function toggleCollapse() {
  var element = document.getElementById("collapse");
  element.classList.toggle("expanded");
}

在上面的示例中，初始时.collapse元素的max-height属性被设置为0，即隐藏内容。当点击按钮时，通过切换.expanded类来改变.collapse元素的max-height属性，从而实现折叠和展开的动画效果。