css 将 div 翻译成他们的 parent

Question

我有back-end背景，其实在学前端

我的问题是 css 转换

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

的顶部

我能做到的最好的事情就是将它们移动到特定值或将它们移动到 X-axe 我不感兴趣

您可以在此 fiddle 中看到预期行为的示例（对不起，代码是学习状态，所以很多字）

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

css 将 div 翻译成他们的 parent

css translate div to their parent

css

translate

css-transitions