マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文

こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。

これは、Google Material Designで最も一般的な特殊効果です。この特殊効果をシミュレートするための既製の js ライブラリも市場に多数あります。ただし、多くのjsとcssを導入する必要があることがよくあります。実際、既存のプロジェクトでは、ユーザーエクスペリエンスを向上させるために、このようなボタンを追加するだけになる場合があります。これらのjsライブラリは少し大きすぎるようです。同時に、 jsによって実装されているため、読み込みの問題に注意を払う必要があることがよくあります。

では、 cssを使用してこの効果を実現する方法はあるのでしょうか?

アイデア

実際、これはアニメーションであり、完全な円が小さいものから大きいものへと成長します。これはcss3のアニメーションを使用して簡単に実現できます。

サンプルコード

@keyframes リップル{
    から {
        変換: スケール(0);
        不透明度: 1;
    }
    に {
        変換: スケール(1);
        不透明度: 0;
    }
}

jsを使用してこれを実装する方法は通常非常に簡単で、クリック要素にclassを追加し、アニメーションが終了したらclassを削除します。

サンプルコード

var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
  addClass(btn,'アニメーション')
}、間違い）
btn.addeventlistener('transitionend',function(){//CSS3 アニメーションの終了をリッスンします。removeClass(btn,'animate')
}、間違い）

では、CSS を通じてアニメーションをトリガーするにはどうすればよいでしょうか?

CSS実装

cssでマウスを操作する擬似クラスは主に

マウスをhover
:activeマウスが押されました
:focusマウスフォーカス
:checkedマウスが選択されました

多くの場合、ページ上の効果はhoverによって実現されます。ページ上にマウスを置くと効果がトリガーされ、ページを離れると効果が復元されます。ただし、ページにマウスを置いた直後にページを離れると、アニメーションはすぐに終了します。

まずは試してみましょう。

構造

これは私たちが書いたページの構造とスタイルです

<スタイル>
.btn{ 
  表示: ブロック; 
  幅: 300ピクセル; 
  アウトライン: 0; 
  オーバーフロー: 非表示;  
  位置: 相対的; 
  遷移: .3秒; 
  カーソル: ポインタ; 
  ユーザー選択: なし; 
  高さ: 100px; 
  テキスト配置: 中央; 
  行の高さ: 100px; 
  フォントサイズ: 50px; 
  背景：トマト; 
  色: #fff;  
  境界線の半径: 10px;
}
</スタイル>
<a class="btn">ボタン</a>

非常にシンプルで、普通のボタンスタイルです

次に、ボタンに必要な完全な円を追加します。

これを実現するために疑似要素を使用します

.btn:後{
    コンテンツ： '';
    位置: 絶対;
    幅: 100%;
    パディング上部: 100%;
    背景: 透明;
    境界線の半径: 50%;
    左: 50%;
    上位: 50%;
    変換: translate(-50%,-50%)
}

上にoverflow: hidden削除し、円を縮小して効果を確認しましょう。

次に、スケーリングアニメーションを作成します

@keyframes リップル{
    から {
        変換: translate(-50%,-50%) スケール(0);
        /** 変換属性はデフォルトで記述されているので、ここで translate(-50%,-50%) を追加する必要があります。そうしないと、置き換えられてしまいます**/
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}

ホバー小さなインタラクティブ体験

マウスをかざしてみますか?

.btn:hover:after{
  アニメーション: リップル 1 秒;
}

効果は良いのですが、マウスを速く動かしすぎると、拡大した円がすぐに縮小してしまうので、少し不安定です。

しかし、これは私たちが望んでいる効果ではありません。私たちが望んでいるのは、単にそこに置いて二度とトリガーされないようにするのではなく、クリックごとに 1 回トリガーされることです。

アクティブトライ

日常業務では、 activeはクリック効果などによく使用されるので、ぜひ試してみてはいかがでしょうか。

.btn:active:after{
  アニメーション: リップル 1 秒;
}

効果も不十分で、マウスを押したままにしているのと少し似ていて、完全にトリガーするにはマウスを押したままにする必要があります。たとえば、上記の例では、アニメーションは1s実行されるため、完全なアニメーション効果を確認するには、ボタンを1sクリックする必要があります。そうしないと、上記のマウスが離れるのと同じように、アニメーションはすぐに縮小されます。

フォーカスエクスペリエンス

任意の要素にフォーカスを当てる必要がある場合は、その要素にtabindex属性を割り当てることができます。

<a class="btn" tabindex="1">ボタン</a>

.btn:focus:after{
  アニメーション: リップル 1 秒;
}

foucsも発動できるが、フォーカスを失った後にのみ再度発動できる。実際の操作は、一度クリックした後、外側の空白部分を再度クリックする。

解決策はないのでしょうか？

もちろんいくつかあります。最後のが間違いなく解決策です、ハハハ

チェック済み

checked直接トリガーできません。フォーム要素が選択された後にトリガーされます。このため、ページ構造を変更する必要があります。

<ラベルクラス="btn">
  <input type="checkbox"><span>ボタン</span>
</ラベル>

ここではlable変更し、 input[type=checkbox]タグを含めました。これは主に、ボタンがクリックされたときにinput選択をトリガーするためです。

スタイルを追加する

.btn>span:after{
  /**セレクタを変更する**/
}
.btn>入力[type=チェックボックス]{
  表示: なし
}
.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップル 1 秒;
}

これによってアニメーションをトリガーすることもできますが、問題は、もう一度クリックすると選択が解除されることです。アニメーションをトリガーするにはどうすればよいでしょうか?

実際、それは:not

.btn>input[type=checkbox]:not(:checked)+span:after{
  アニメーション: リップル 1 秒;
}

一見すると、かなり巧妙に思えますが、よく考えてみると、表裏両方にアニメーションが書かれているので、 :checkedとは何の関係もないのではないでしょうか？直接行く方が良い

.btn>input[type=checkbox]+span:after{
  アニメーション: リップル 1 秒;
}

無限サイクル…

この問題は長い間私を悩ませてきましたが、神は一生懸命働く人を失望させません。その後、2つの状態で異なるアニメーションをトリガーしようとしましたが、次のように個別にトリガーできます。

.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップル1 1秒;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
  アニメーション: リップル2 1秒;
}

これは簡単に理解できるはずです。

さて、ここからがポイントです。ripple1 とripple1 ripple2アニメーションプロセスを同じに変更すると、別々にトリガーできるようになります。つまり、アニメーション名が異なっている限り、CSS はそれらを異なるアニメーションとして扱います。

これは非常に簡単です。デフォルトの状態を設定し、状態を選択して、異なる名前のアニメーションをトリガーするだけです。

.btn>input[type=checkbox]+span:after{
  アニメーション: リップルイン 1 秒;
}
.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップルアウト 1 秒;
}
@keyframes リップルイン{
    から {
        変換: translate(-50%,-50%) スケール(0);
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}
@keyframes ripple-out{/*名前だけが異なります*/
    から {
        変換: translate(-50%,-50%) スケール(0);
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}

効果は記事の冒頭で示した通り、完璧です

完全なデモは次のとおりです

https://codepen.io/xboxyan/pen/Jmvyex/

いくつかの欠点

上記のアニメーションスタイルはデフォルトでトリガーされるため、ページが読み込まれるとボタン上の水滴アニメーションが 1 回移動するのがわかりますが、特に目立つわけではなく、受け入れられるものではありません。

第二に、実際の効果は、マウスがクリックされたポイントから広がるはずです。私たちの CSS では、これは確かにできず、中心から広がることしかできず、これも妥協点です。ここでアイデアがあります。CSS cssを使用して、クリックするたびにstyleに対応する値を保存し、 cssでも使用できるようにします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

>>: Vueは書籍ショッピングカートの機能を実現