CSS 根据子高度在父级中定位 div

Question

我有以下例子。内容在包装之外。单击时它会向下滑动。问题是，由于内容的包裹高度较小，因此它会一直保持包裹状态并滑动更长的时间，并且当它出去时，它会走得更快，因为它必须传播得更远。我不想更改幻灯片时间，这与此无关。

有没有办法将内容（仅使用CSS）定位在换行之外（就像它是底部：100％换行），但随后它想向下到顶部：0？

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {


  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})

.wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  position: absolute;
  top: -100%;
  transition: top 0.5s;
}

.opened {
  top: 0;
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}

<div class="wrap">

  <div class="content">

    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.

  </div>
</div>


<a href="#" id="toggle">toggle</a>

Answer 1

您可以在 css 的帮助下更改此行以移动位置。

.content {
  position: absolute;
  top: 100%;
  transform: translateY(-100%); /* Move the content up by its own height */
  transition: transform 0.5s;
}

.content.opened {
  transform: translateY(0); /* Move the content down to its original position */
}

我希望它会起作用。