将 calc() 平滑地定位到正确的位置答案

【问题标题】：Positioning calc() smoothly into its correct position将 calc() 平滑地定位到正确的位置
【发布时间】：2015-07-13 18:23:07
【问题描述】：

我使用 calc() 作为内联 CSS。定位似乎很明显。因为页面加载后它会从页面底部跳转到正确的位置。有没有办法可以做一个缓和的过渡或类似的。因此，它的定位更平滑，而不是从底部跳到它的位置。

<div style="top: calc(35%);"></div>

【问题讨论】：

【解决方案1】：

不需要仅对百分比使用 calc，但这里有一个在代码运行 1 秒后触发 CSS 转换的类更改示例：

setTimeout(function(){
  document.getElementById('d').className = 'ready';
}, 1000);

#d {background: #ccc; position: absolute; transition: top 1s linear; top: 0}
#d.ready {top: calc(35%);}

&lt;div id="d"&gt;DIV&lt;/div&gt;

【讨论】：

很好，谢谢。在将您的答案标记为正确答案之前，我将等待一个纯基于 css 的答案。 :)
不客气！ :) 虽然这是一个基于 CSS 的答案，但我只使用 JS 来更改类，因为如果立即设置类（它需要具有开始值和结束值），则转换将不起作用。
也许动画代替过渡可能更合适，因此不需要 js。
@FabrizioCalderan 是的，这是一个选项。我进行了过渡，因为 OP 说 div 从底部跳到中心位置，这意味着在某些时候会触发 top 值的变化。

【解决方案2】：

以这种方式改变你的风格：

<div style="top: 35%;transition: .5s;"></div>

【讨论】：