重启/重置并重播过渡css？

Question

我需要使用javascript重播css过渡。 当我重置我的div的css样式并应用新的转换时，没有任何反应......

我认为两个代码都在同一个执行框架中执行，并且通过优化，它不会改变任何东西......

示例：https://jsfiddle.net/f0s8a8jp/2/

MySingleTapListener mySingleTapListener = new MySingleTapListener(mMapView.getContext(), mMapView);
mMapView.setOnSingleTapListener(mySingleTapListener);
mMapViewHelper = new EnhancedMapViewHelper(mMapView, handler, this); //<--onGraphicClickListener is set here

我目前找到的唯一解决方案（不是真的干净），是在属性重置和新转换的应用程序之间使用setTimeout：https://jsfiddle.net/f0s8a8jp/3/

欢迎更好的想法？！

Answer 1

转换将应用于元素的计算维度。设置CSS属性不会计算它。因此，提出和退回财产就像让它保持不变。它是在浏览器需要重排元素时计算的。

setTimeout最终会让时间到浏览器来计算回流。您可以使用requestAnimationFrame来实现相同而不会闪烁。

另一个hack包括强制浏览器在更改CSS属性后立即重排，例如使用test[0].offsetWidth;。 然后正确执行转换：https://jsfiddle.net/f0s8a8jp/9/

有关回流（和重绘）的更深入讨论，请访问：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Answer 2

试试这个：

https://jsfiddle.net/f0s8a8jp/4/

我已将其设为click，因此您需要点击它才能看到结果。

我真正改变的唯一事情就是代码的顺序。