元エンジニアPMのプロダクトマネージャーお役立ち情報

プロダクトとビジネスの両輪どっちも回してる人 事業戦略やプロダクトマネジメントに関する情報を発信

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;
 }
`

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