javascript - CSS 过渡高度

Question

我已经构建了一个响应式导航，在单击按钮时会显示该导航。这使用 translate 将 shim div 向左移动。通过设置 min-height 属性，垫片 div 也根据浏览器高度调整大小(使用 JS)。当页面加载时，垫片高度是动画的。我相信这是因为我正在使用:transition: all, x, x。

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

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

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

Answer 1

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