cssでdisplay:none→display:blockに変更されたことをReact側で検出

cssでdisplay:none→display:blockに変更されたことをReact側で検出する方法がなかなかわからず、今回はonAnimationEndを使いました。そのときのメモです。

背景

画面サイズがPCサイズ→スマホサイズに変わったときに、メニューをタブからアイコンに切り替えるのを、cssの@mediaだけでやっていました。ただこの場合、スマホサイズに変わったときに何か処理をする場合に、何をトリガにすればいいのかがわからなくなりました。
Windowsのサイズを解析して、、という方法がありそうですが、もっと簡単にやりたかったです。

今回のやりかた

・アイコンに　onAnimationEnd=関数　を設定。これをトリガにする
・アイコンがdisplay:blockになったときにダミーのアニメーションを走らせる。0秒で変更するアニメーションとした

css

@media screen and (max-width: 600px) {
  .IconArea {
    display: block;
    animation-name: dummyAnime;
    animation-duration: 0s;
  }
}

@keyframes dummyAnime{
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ソース

        <div className="IconArea" onAnimationEnd={onMenuIconDisplayed}>
                ：
        </div>