css 将 div 翻译为他们的父级 [关闭]答案

【问题标题】：css translate div to their parent [closed]css 将 div 翻译为他们的父级 [关闭]
【发布时间】：2018-09-30 23:59:16
【问题描述】：

我有后端背景，其实是在学前端

我的问题是 css 过渡

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

我能做到的最好的就是用一个特定的值来移动它们，或者在我不感兴趣的 X 轴上移动它们

你可以在这个 fiddle 中看到一个预期行为的例子（对不起，这是一个学习状态的代码，所以很多字）

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

如果我可以在 X 轴上移动它们，我理解这样一个事实，因为它们可以在它们的元素内移动，但是 ...

我只是想让他们在我点击时都加入 p1 的位置（更高的 p），这一定很简单，但因为这对我来说是全新的，所以他们一定有我错过的东西

提前致谢

【问题讨论】：

标签： css css-transitions translate

【解决方案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>

【讨论】：