我如何从下往上“折叠”一个 div？

Question

当我选中一个复选框时，我需要隐藏一些信息，我设法做到了，但它从顶部折叠，底部固定，我试图做相反的事情，保持上部固定并折叠div 从底部开始。有人可以帮忙吗？

这是css代码：

.home.payment.cyber .ade #ignore > div {
  max-height: 340px;
  transition: all .5s linear;
  overflow: hidden;
  opacity: 1;
}

.home.payment.cyber .ade #ignore #ignore_child.fold_transition {
    max-height: 5px;
    transition: all .5s linear;
    opacity: 0;
}

Answer 1

尝试同时为元素的margin-top 和height 设置动画。

类似：

div {
  height: 20px;
  overflow: hidden;
  transition: .5s;
}

div.toggle {
  height: 0;
  margin-top: 20px;
}

<div onclick="this.classList.toggle('toggle')">Some content</div>