css animationのリスタートを行う場合のハック

tl:dr;

Reactなどで、css　animationをかけている要素に対して、 中身の小要素が変わったときにサイドアニメーションをリスタートさせる方法　　

課題

propsが変更されても、中身が変わるだけなのでアニメーションは再実行されない。

const animTarget = (props:Props) => {
 return (
  <Animation>{props.children}</Animation> 
 )
}

const Animation = styled`
 animation: ${xxx} 0.4s 0.6s ease-out forwards;
`

解決策

明示的にスタイルをreflowさせてあげることで解決。 クラスの付替えの間にreflow処理を入れてあげる（void e.offsetWidth)

const animTarget = (props:Props) => {

  if (document.querySelectorAll('.tar')) {
    Array.from(document.querySelectorAll('.tar')).map(e => {
      e.classList.remove('is-animate')
      //-hack for reflow
      void e.offsetWidth
      e.classList.add('is-animate')
    })
  }
 return (
  <Animation　className='tar is-animate'>{props.children}</Animation> 
 )
}

const Animation = styled`
 &.is-animate{
  animation: ${xxx} 0.4s 0.6s ease-out forwards;
 }
`

もうちょっとうまい方法があったら教えてください。