// Style: // transition: opacity 1s // transitionを発火する elem.style.opacity = '0'; getComputedStyle(elem); // 終わったら次の画面をactiveにする elem.addEventListener('transitionend', evt => { if (evt.propertyName === 'opacity') { evt.target.remove(); homeScreen.classList.add('active'); } }); /* * でも… */ button.addEventListener('focus', () => { // もしこれがmustacheのようなテンプレート仕組み… render(); }); transitionendが発火されないケース 要
![Browser animation in 2017](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0adfce3a125aa115c4babbe10a0c65f787f1ee6/height=288;version=1;width=512/https%3A%2F%2Fmedia.slid.es%2Fthumbnails%2F620872622a2d27ac99581768a3a6479b%2Fthumb.jpg)