CSS 过渡高度答案

【问题标题】：CSS Transition HeightCSS 过渡高度
【发布时间】：2014-03-11 07:43:42
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用transition: left, ... 代替transition: all, ...。这样，您只需为 left 属性设置动画。对其他属性的更改会立即应用。

【讨论】：