元エンジニア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;
 }
`

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