CSS中过渡属性的动态值

【问题标题】：Dynamic value for a transitioned property in CSSCSS中过渡属性的动态值
【发布时间】：2016-01-22 18:30:57
【问题描述】：

我寻找一种在运行时以编程方式管理transition CSS 的方法。因此，我需要将transition 中的top 值相对更改为其他组件的行为。有可能还是我在做梦？

【问题讨论】：

您可以动态分配 top 值，但不能使用纯 CSS。您将需要 JavaScript 和内联样式。
是的，但是“过渡”设置可以保留在 css 上吗？你能写一个小例子吗？？
Here 是一个非常非常简单的。这就是你要找的东西吗？
太棒了..它有效..谢谢

标签： javascript css css-transitions transitions

【解决方案1】：

是的，transition 设置（即应转换其值更改的属性的规范）可以在 CSS 中完成，我们仍然可以动态修改这些属性的值。

只需要一点 JavaScript 即可通过内联样式属性将修改后的值分配给元素。无论值是通过 CSS 选择器还是通过内联样式更改，在元素上设置的 transition 都将适用。

/* transition after some time so that the effect is visible */
window.setTimeout(function() { 
  document.getElementsByTagName('div')[0].style.top = '100px'; /* set the top value dynamically */
}, 500);

div {
  position: absolute;
  top: 50px;
  transition: all 1s;
}

&lt;div&gt;Something&lt;/div&gt;

【讨论】：