CSS中转换属性的动态值

Question

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

Answer 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;
}

<div>Something</div>