Wait for next render in Stencil

问题

Is there a reliable way to wait for the next render to complete, e.g. with a Promise?

My use case: I want to restart a CSS animation by removing and adding a class to my element using a state variable:

@State() isAnimating = true;

restartAnimation() {
  this.isAnimating = false;
  // TODO wait for render to complete
  this.isAnimating = true;
}

render() {
  return <Host class={{ animated: this.isAnimating }}></Host>
}

Is there an easy way to achieve this? I've tried readTask and writeTask as well as requestAnimationFrame. A timeout sometimes works but not always (race condition). The only reliable way I have found is to set some variable and check its value in componentDidRender() which is quite verbose.

来源：https://stackoverflow.com/questions/64539038/wait-for-next-render-in-stencil