Rippleエフェクト実装例

マテリアルデザインでよく見るボタンを押した際のRippleエフェクトに関する覚書

DEMO

覚書

今回実装にあたり、Vuetify.jsを主に参考にした。その過程で知ったことを以下に覚書として残しておく。

currentColorcolorと同じ値を指定出来る

汎用的なRippleエフェクトを作る場合、ボタンの色によって波紋の色を変更する必要がある。白いボタンに白の波紋が出ても全く意味がわからないためだ。

ボタン毎にRippleの色を指定するのもいいが、currentColorを利用すればボタンのテキスト色と同じ色を波紋の色にする事ができる。これで波紋の色指定なしにエフェクトを実現出来る。

currentColorの利用法として覚えておきたい。

アニメーションのベジェ曲線を直感的に指定する

cubic-bezier.com

このサイトを利用すればcubic-bezierの値を直感的に取得することが出来る。

波紋が角丸ボタンからはみ出ないようにする

波紋エフェクトのルートにborder-radius: inheritを指定すればいい。

Vuetifyでこの方法が利用されていた。角丸の値を継承するという方法は思いつかなかった。