Material UIのrippleアニメーションを模倣してみた

React用のMaterial UIで実装できるボタン押下時のエフェクト。

クリックした地点から波紋が広がるようなアニメーションを見て

これはぜひ実装したい！

と思ったのでやってみた

作ったもの

コードはこちら
CodeSandBox

buttonの構造

はこちら

<button class="base-root">
  <span class="label">button</span>
  <span class="ripple-root">
    // ↓buttonのmousedownで生成↓
    <span class="ripple-ripple ripple-rippleVisible">
      <span class="ripple-child ripple-childLeaving"></span>
    </span>
  </span>
</button>

class名は本家とちょっと変えたけど概ねこんな感じ

ripple-childLeavingはmouseup時に付くっぽい

ripple-rippleの大きさ

rippleの大きさを見てみると
本家は三平方の定理的なさむしんぐを使っておっきな正方形を作ってるっぽいけど
めんどくさいので、適当にbase-rootの２倍でやってみる

と思ったけど普通に半径求めた

// calculation
const rootWidth = rippleRoot.clientWidth;// buttonの幅
const rootHeight = rippleRoot.clientHeight;// buttonの高さ
const radius = Math.sqrt(Math.pow(rootWidth, 2) + Math.pow(rootHeight, 2));// 円の半径
const top = e.layerY - radius;
const left = e.layerX - radius;
rippleRipple.style.width = `${radius * 2}px`;
rippleRipple.style.height = `${radius * 2}px`;
rippleRipple.style.top = `${top}px`;
rippleRipple.style.left = `${left}px`;

これでクリックした地点を中心とした要素が作れた

DOM操作

については何か言うことはない。

コード見てくれ

問題点

連続でクリックするとボタンが白くなっちゃう

本家

模倣

ので解決策知ってる人教えろくださいm(__)m

pulsateを結局使わなかった

本家のコードやcssに時折**-pulsateという文字列があって、
keyframeも設定されてたからどこかで使うんじゃないかと思ってたんだけど
結局使わんかった
こちらもどこで使うのか知ってる人いたら教え(ry

ちなみにpulsateとはどっくんどっくんする的な意味っぽい