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