CSS过渡高度性能 - 转换元素和方法的最佳性能选择？

Question

我似乎无法自己评估或找到任何来源，说明以下哪些示例应该在性能方面产生最佳结果。因此，我转向你们，希望你能启发这个话题。

我有一个固定的标题，在移动设备上展开它height以显示导航菜单。但是，我不太确定扩展父级（容器的）高度是否更好，或者只扩展实际菜单的高度。

我很清楚转换高度并不是性能最佳的选择，但是它提供了我喜欢的动画。

简而言之：我认为我的主要问题是，与动画菜单本身相比，动画容器的高度是否会产生最多渲染，绘画和合成？

此外，欢迎任何其他关于如何改进动画的说明。我非常了解硬件加速并创建了一个新的复合图层（例如translateZ(0)），所以它更多地是关于动画正确的＆＃34;正确的＆＃34;元件。

除了上述内容之外，我是否遗漏了一些可以改善过渡/动画效果的内容？

您可以在下面看到两个示例。

第一个例子，扩展容器的高度：

＆＃13;

＆＃13;

body,html{
  margin:0;
  padding:0;
}
.fixed{
  position:fixed;
top:0;
height:50px;
background: #ddd;
width:100%;
box-shadow: 0 1px 2px #000;
transition: height .4s ease-in;
}
.menu-wrap{
  position:absolute;
  top:50px;
  width:100%;
  overflow:hidden;
  bottom:0;
}
.menu{
  position:relative;
}
.fixed:hover{
  height:100%;
}

＆＃13;

<div class="fixed">
Header
<div class="menu-wrap">
<ul class="menu">
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
</ul>
</div>
</div>
<div class="page-content">
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
</div>

＆＃13;

＆＃13;

＆＃13;

第二个例子，扩展菜单本身：

＆＃13;

＆＃13;

body,html{
  margin:0;
  padding:0;
}
.fixed{
  position:fixed;
top:0;
height:50px;
background: #ddd;
width:100%;
box-shadow: 0 1px 2px #000;
}
.menu-wrap{
  position:absolute;
  top:100%;
  width:100%;
  overflow:hidden;
  bottom:0;
  height:0px;
  transition: height .4s ease-in;
  background:#ddd;
}
.menu{
  position:relative;
}
.fixed:hover .menu-wrap{
  height:calc(100vh - 50px);
}

＆＃13;

<div class="fixed">
Header
<div class="menu-wrap">
<ul class="menu">
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
</ul>
</div>
</div>
<div class="page-content">
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
Page content<br>
</div>

＆＃13;

＆＃13;

＆＃13;