Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Image from Gyazo

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

これはぜひ実装したい!

と思ったのでやってみた

作ったもの

Image from Gyazo

コードはこちら
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の2倍でやってみる

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

// 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操作

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

コード見てくれ

問題点

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

本家

Image from Gyazo

模倣

Image from Gyazo

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

pulsateを結局使わなかった

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

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

adzunyan
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした