CSS如何增加底部向上的高度

【问题标题】：CSS how to increase the height bottom upwardsCSS如何增加底部向上的高度
【发布时间】：2018-08-08 19:11:15
【问题描述】：

我正在尝试在单击时更改 div 的 CSS。

这很容易实现（我正在使用样式化组件）：

height: ${props => (props.isOpen ? '100px' : '')};

但是，这总是会从上到下更改框，即当我单击它时，div 的顶线保持静止，底线向下移动以达到新的高度。

我想实现相反的效果：顶线向上移动，而 div 的底部保持原位

这是如何在 CSS 中实现的？

【问题讨论】：

应用相同值的负边距顶部
能否请您添加sn-p以获得更多理解

标签： javascript html css height

【解决方案1】：

您可以在设置元素本身的负数margin-top 的同时将要折叠的元素包裹起来并增加父元素的高度。

类似这样的：

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.outer').classList.toggle('collapsed');
});

.outer {
  position: relative;
  overflow: hidden;
  max-height: 500px;
  transition: all 5s ease;
}

.outer.collapsed {
  max-height: 0;
}

.inner {
  background: red;
  transition: all 5s ease;
}

.outer.collapsed .inner {
  margin-top: -100%;
}

<div class="outer">
  <div class="inner">
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text final<br />
  </div>
</div>
<button>Toggle</button>

【讨论】：

@donut 有什么想法吗？