当我立即使用JavasSript更改CSS属性时，不会发生过渡

Question

当我通过javascript立即更改CSS属性时，不会发生过渡。但是当我使用setTimeout进行0到50ms转换时，会发生变化，具体取决于浏览器。
但是不一致的地方还有什么更好的方法吗？

这里是example

Answer 1

您看不到任何过渡，因为最终样式是在加载页面时应用的，并且不会过渡。

• 您已经提到过渡时间，但没有提到哪个样式属性。

使用

element.style.transition = 'all 1s'

您可以提及任何样式属性，也可以仅提及所有样式，以防您希望将过渡应用于所有样式属性

• 向元素添加事件侦听器，或在加载时进行更改以查看过渡

https://jsfiddle.net/8zv9sbf1/53/