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;
}
`
もうちょっとうまい方法があったら教えてください。