CSS 将 div 转换为它们的父级

Question

我有一个后端背景，我实际上正在学习前端

我的问题是 CSS 过渡

我正在尝试对div 中的所有元素进行翻译以加入此特定div 的顶部

我能完成的最好的事情就是用特定的值移动它们或在我不感兴趣的 X-axe 上移动它们

您可以在此小提琴中看到预期行为的示例(对不起，代码是一种学习状态，所以很多单词(

https://jsfiddle.net/49gptnad/3878/

<div>
<p1>
<p2>
<p3>
<p4>
</div>

我理解如果我可以在 X-axe 上移动它们的事实，因为它们可以在他们的元素内移动，但是......

我

只是希望它们在我点击时都加入 p1(更高的 p(的位置，它一定很简单，但由于这对我来说是全新的，他们一定有一些我错过的东西

提前致谢

Answer 1

最简单的方法是将height调整为 0 并保持溢出以达到所需的效果。但是由于我们无法将height动画从 auto 设置为 0，因此我们可以改用max-height(也不要忘记默认边距 p (。

这是我使用悬停的一个简化示例：

.anime {
  display:inline-block;
  min-height:100px;/*to avoid flickering*/
}
.anime p {
 transition:1s all;
 max-height:50px;
}
.anime:hover p {
  max-height:0;
  margin:0;
}

<div class="anime">
<p>Photo 1</p>
<p>Photo 2</p>
<p>Photo 3</p>
<p>Photo 4</p>
</div>