javascript - CSS 中过渡属性的动态值

Question

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

Answer 1

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

只需要一点 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;
}

<div>Something</div>