CSS中过渡属性的动态值

Question

I searched for a way to manage the transition CSS programmatically at runtime. Therefore I need to change the top value in the transition relatively at to the behavior of others components. Is it possible or I am dreaming?

Answer 1

Yes, the transition setup (that is specification of the properties whose change of value should be transitioned) can be done in CSS and we can still dynamically modify the value for those properties.

All that is needed is a bit of JavaScript to assign the modified value to the element through inline style attributes. The transition which is set on the element will apply irrespective of whether the value is changed through a CSS selector or through inline styles.

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