Question

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

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

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

但是，这始终会从上到下更改该框，即当我单击它时，div的顶行保持不变，而底行向下移动，从而获得新的高度。

我想实现相反的效果：顶行向上移动，而div的底部保持不变

这在CSS中如何实现？

Answer 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>

CSS如何向上增加底部高度

1 个答案: