CSS过渡高度

Question

我已经构建了一个响应式导航，在单击按钮时会显示该导航。这使用translate将shim div移动到左侧。通过设置min-height属性，shim div也相应地调整浏览器高度（使用JS）。当页面加载时，垫片高度是动画的。我相信这是因为我正在使用：转换：全部，x，x。

我想在没有动画高度的情况下为垫片开口设置动画。

尝试刷新页面几次以查看动画的高度。

演示：http://codepen.io/anon/pen/gCoqI

Answer 1

您可以在CSS中的min-height上将100%设置为.shim。这样它不会改变高度，因此不会动画（并且需要更少的JS）。将动画属性从all更改为left也应该有效。

Answer 2

而不是transition: all, ...，请使用transition: left, ...。这样，您只需为左侧属性设置动画。立即应用对其他属性的更改。