CSS中转换属性的动态值

Question

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

Answer 1

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

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

＆＃13;

＆＃13;

/* 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);

＆＃13;

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

＆＃13;

<div>Something</div>

＆＃13;

＆＃13;

＆＃13;