PWA開発者の知るべき
アニメーションの3個

PWA Night vol. 13・2020-02-19
株式会社 Birchill, Brian Birtles

自己紹介

2004~2019
SVG WG 2011~
CSS WG 2015~
2019~

とは…

株式会社Birchill(バーチル)
令和元年6月設立
全員元Mozilla Firefoxエンジニア
現在に至るまでブラウザー開発
- C++, Rust, JS
Webアプリの開発
- TypeScript, React/Preact, Redux, PouchDB
- Tailwind CSS

以前…

10 things I wish people knew about Web animation birtles.github.io/cssconf2019/ CSSConf 2019 深セン 2019-03-30 🎞 Recording (英語)
アニメーションについて嫌いな10個 birtles.github.io/mozdev2019/ Mozilla Developer Roadshow 2019-11-11, 2019-11-13 🎞 YouTube (日本語) 🎞 YouTube (英語)

PWA開発者の知るべき
アニメーションの3個

① CSS Transitionを発生させるための「スタイルの変更」


.button {
  background: hsl(77, 86%, 81%);
  transition: background-color .25s,
              transform .15s;
}
.button:hover {
  background: hsl(77, 86%, 91%);
  transform: scale(1.05);
}


button.onclick = () => {
  // パネルを作る
  const panel = document.createElement('div');
  panel.classList.add('panel');
  panel.textContent = 'ハロー！';
  parent.appendChild(panel);

  // アニメーションさせる
  panel.style.transform = 'scale(0)';
  panel.style.transition = 'transform .5s';
  panel.style.transform = 'scale(1)';
};


  button.onclick = () => {
    const panel = document.createElement('div');
    ...
    panel.style.transform = 'scale(0)';
    panel.style.transition = 'transform .5s';
    panel.style.transform = 'scale(1)';
  };


button.onclick = () => {
  // パネルを作る
  const panel = document.createElement('div');
  ...

  // アニメーションさせる
  panel.style.transform = 'scale(0)';
  panel.style.transition = 'transform .5s';
  requestAnimationFrame(() => {
    panel.style.transform = 'scale(1)';
  });
};

たまにChromeまたSafariでtransitionが走るけど、Chromeのエンジニアによると、これはChromeのバグです。


  button.onclick = () => {
    const panel = document.createElement('div');
    ...
    panel.style.transform = 'scale(0)';
    requestAnimationFrame(() => {
      panel.style.transform = 'scale(1)';
    });
  };


button.onclick = () => {
  // パネルを作る
  const panel = document.createElement('div');
  ...

  // アニメーションさせる
  panel.style.transform = 'scale(0)';
  panel.style.transition = 'transform .5s';
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      panel.style.transform = 'scale(1)';
    });
  });
};


  button.onclick = () => {
    ...
    panel.style.transform = 'scale(0)';
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        panel.style.transform = 'scale(1)';
      });
    });
  };


button.onclick = () => {
  // パネルを作る
  const panel = document.createElement('div');
  ...

  // アニメーションさせる
  panel.style.transform = 'scale(0)';
  getComputedStyle(panel).transform;
  panel.style.transition = 'transform .5s';
  panel.style.transform = 'scale(1)';
};


  button.onclick = () => {
    const panel = document.createElement('div');
    ...
    panel.style.transform = 'scale(0)';
    getComputedStyle(panel).transform;
    panel.style.transition = 'transform .5s';
    panel.style.transform = 'scale(1)';
  };

注意点

以下の場合は計算されたスタイルはない…
- createElementの直後
- display: none
getComputedStyle(elem)だけだと、スタイルの算出は走らない！❌
- → getComputedStyle(elem).<property>👍
場合によってはgetComputedStyleは重い


const PopupButton = () => {
  const [isShowing, setIsShowing] = React.useState(false);

  const panelRef = React.useRef(null);
  React.useLayoutEffect(() => {
    panelRef.current.style.transform = 'scale(1)';
  }, [isShowing, panelRef.current]);

  const buttonClick = React.useCallback(() => {
    setIsShowing(!isShowing);
  }, [isShowing]);

  return (<>
    <button onClick={buttonClick} />
    {isShowing ? (
      <div ref={panelRef}
        style={{ transition: 'transform .5s', transform: 'scale(0)' }}>
        ハロー！
      </div>
    ) : null}
  </>);
};


const PopupButton = () => {
  const [isShowing, setIsShowing] = React.useState(false);

  const panelRef = React.useRef(null);
  React.useLayoutEffect(() => {
    getComputedStyle(panelRef.current).transform;
    panelRef.current.style.transform = 'scale(1)';
  }, [isShowing, panelRef.current]);

  const buttonClick = React.useCallback(() => {
    setIsShowing(!isShowing);
  }, [isShowing]);

  return (<>
    <button onClick={buttonClick} />
    {isShowing ? (
      <div ref={panelRef}
        style={{ transition: 'transform .5s', transform: 'scale(0)' }}>
        ハロー！
      </div>
    ) : null}
  </>);
};

② CSS Transitionsが
終わらないこともある


button.onclick = () => {
  // … パネルが表示されていれば、削除する。
  panel.remove();
};


button.onclick = () => {
  // … パネルが表示されていれば、削除する。
  panel.style.transform = 'scale(0)';
  panel.addEventListener('transitionend', () => {
    panel.remove();
  });
};

もしtransitionの再生中に…

要素が display:none になったら？
要素が再生成されたら？
transition-property の計算値が変わったら？
要素が削除されたら？

transitionはキャンセルされて
transitionend は発火されない！

1) Transitionが生成されていない 2) Transitionが終わらない


//...

const buttonClick = React.useCallback(() => {
  if (panelState === 'showing') {
    setPanelState('hiding');
    panelRef.current.addEventListener('transitionend', () => {
      setPanelState('hidden');
    }, { once: true });
  } else {
    setPanelState('showing');
  }
}, [panelState]);

// ...

新しいイベント！

transitionrun
→ transitionが生成された 🆕
→ transitionendを待ってもオッケー 🙆‍♂️
transitioncancel
→ 要素が消えた🗑️ （削除されたり、再生成されたり、 display:noneになったり）

→ transitionendを待たない方が良い ❌
animationcancel （transitioncancelと同様）

`transitioncancel`たち

53+
74+ No animationcancel
Tech Preview
〇 No animationcancel

③ Web Animations API
を使ってみてください

Element.animate()


button.onclick = () => {
  // パネルを作る
  const panel = document.createElement('div');
  panel.classList.add('panel');
  panel.textContent = 'ハロー！';
  parent.appendChild(panel);

  // アニメーションさせる
  panel.style.transform = 'scale(0)';
  getComputedStyle(panel).transform;
  panel.style.transition = 'transform .5s';
  panel.style.transform = 'scale(1)';
  panel.animate(
    { transform: ['scale(0)', 'scale(1)'] },
    { duration: 500, easing: 'ease' }
  );};

このブラウザーは Element.animate を対応していないようです。

Animation.finished


React.useLayoutEffect(() => {
  let animation;
  if (panelState === 'showing') {
    animation = panelRef.current.animate(
      { transform: ['scale(0)', 'scale(1)'] },
      { duration: 500, easing: 'ease' }
    );
  } else if (panelState === 'hiding') {
    animation = panelRef.current.animate(
      { transform: ['scale(1)', 'scale(0)'] },
      { duration: 500, easing: 'ease' }
    );
    // animationがキャンセルされたらfinishedがrejectされる
    animation.finished.then(() => {
      setPanelState('hidden');
    });
  }
  return () => {
    if (animation) { animation.cancel() }
  };
}, [panelState, panelRef.current]);

このブラウザーは Animation.finished を対応していないようです。

CSS Transitions ♡ Web Animations


// transitionend
button.onclick = () => {
  panel.style.transform = 'scale(0)';
  panel.addEventListener('transitionend', () => {
    panel.remove();
  });
};


// Web Animationsのfinished Promise
button.onclick = () => {
  panel.style.transform = 'scale(0)';
  const transition = panel.getAnimations()[0];
  transition.finished.then(() => {
    panel.remove();
  });
});

rgb(255, 0, 0)

→

rgb(128, 64, 0)

→

rgb(0, 128, 0)

😧

hsl(0, 100%, 50%)

→

hsl(60, 100%, 37.5%)

→

hsl(120, 100%, 25%)

❓

`CSSTransition.setKeyframes()`


document.addEventListener('transitionrun', evt => {
  if (evt.propertyName !== 'fill') {
    return;
  }

  const transition = evt.target
    .getAnimations()
    .find(animation => animation.transitionProperty === 'fill');

  const keyframes = transition.effect.getKeyframes();
  const hslKeyframes = generateHslKeyframes(
    keyframes[0].fill,
    keyframes[1].fill
  );

  transition.effect.setKeyframes(hslKeyframes);
});

このブラウザーは getAnimationsもしくはCSSTransition.setKeyframesを対応していないようです。

Web Animations


Element.animate()	48+	36+	3月？
getAnimations()	Nightly, 75+	Experimental Web Platform features, 4月？	3月？

おまけアニメーションできる
ようにDOMを常備する

Single page apps


react.render(
  <Router>
    <Route exact path="/" component={Photos} />
    <Route path="/polls" component={Polls} />
    <Route path="/finder" component={Finder} />
  </Router>
);

Single page apps


<Router>
  <Route render={({ location }) => (
    <TransitionGroup>
      <CSSTransition key={location.pathname}
        timeout={400} classNames="slide">
        <Switch location={location}>
          <Route exact path="/" component={Photos} />
          <Route path="/polls" component={Polls} />
          <Route path="/finder" component={Finder} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  )}/>
</Router>

クリックすると…

クリックイベントハンドラー
DOMの要素生成
スタイル算出
- （<CSSTransition> の場合は何度もスタイル算出およびレイアウトの処理をさせる）
レイアウト
描画（特に新しい要素の領域）
transitionが始まる

What about…


<Router>
  <Route render={({ location }) => (
    <Photos active={location.pathname === '/'}/>
    <Polls active={location.pathname === '/stories'}/>
    <Finder active={location.pathname === '/notes'}/>
  )}/>
</Router>

クリックすると…

クリックイベントハンドラー
DOMの要素生成
スタイル算出
- （<CSSTransition> の場合は何度もスタイル算出およびレイアウトの処理をさせている）
レイアウト
描画
transitionが始まる

Before (~100ms)

After (~30ms)

まとめ

① CSS Transitionを発生させるためにはスタイルの変更が必要 requestAnimationFrame, getComputedStyle, CSS animations, Element.animate
② CSS Transitionsが終わらないこともある transitioncancel, transitionrun, Animation.finished
③ Web Animations API を使ってみて Element.animate, getAnimations
Bonus アニメーションがすぐできるようにDOMを常備する

その他のWebブラウザ最前線

ご清聴ありがとうございました

birtles.github.io/pwanight13/

2019年のプレゼン

@brianskold

birchill.co.jp

PWA開発者の知るべき アニメーションの3個

PWA Night vol. 13・2020-02-19 株式会社 Birchill, Brian Birtles

自己紹介

とは…

以前…

PWA開発者の知るべき アニメーションの3個

① CSS Transitionを発生させるための「スタイルの変更」

注意点

② CSS Transitionsが終わらないこともある

もしtransitionの再生中に…

新しいイベント！

transitioncancelたち

③ Web Animations API を使ってみてください

Element.animate()

Animation.finished

CSS Transitions ♡ Web Animations

CSSTransition.setKeyframes()

Web Animations

おまけアニメーションできるようにDOMを常備する

Single page apps

Single page apps

クリックすると…

What about…

クリックすると…

まとめ

その他のWebブラウザ最前線

ご清聴ありがとうございました

PWA開発者の知るべき
アニメーションの3個

PWA Night vol. 13・2020-02-19
株式会社 Birchill, Brian Birtles

PWA開発者の知るべき
アニメーションの3個

② CSS Transitionsが
終わらないこともある

`transitioncancel`たち

③ Web Animations API
を使ってみてください

`CSSTransition.setKeyframes()`

おまけアニメーションできる
ようにDOMを常備する