作ったもの

コードはこちら
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とはどっくんどっくんする的な意味っぽい

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