CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

序文

フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジーと整合性に細心の注意を払います。私は、vueエコシステムのelementUI、ant-design-vue、iView、およびreactエコシステムのant-design、materialUIなどの成熟したUIフレームワークなど、vue、react、angularなどのフレームワークをベースにプロジェクトを開発してきました。これらのサードパーティのUIフレームワークにより、プロジェクト開発のコストと複雑さが大幅に削減され、開発者はビジネスロジックとサービスの実現に集中できるようになりました。

しかし、ユーザーエクスペリエンスが重視されるようになり、インタラクティブエクスペリエンスの要件が向上し、CSS3などの新しい標準が登場したことで、Webはより輝きを増し、さまざまなアニメーションの実装が非常に簡単になりました。materialUIフレームワークを研究していたとき、そのインタラクションに驚きました。そこで、materialUIに似たボタンクリックアニメーションを実装し、独自のUIライブラリにカプセル化するために、いくつかのアイデアを特別にまとめ、多くのフロントエンドエンジニアと議論したいと考えています。

文章

まず、materialUI のボタンクリック効果を見てみましょう。

本質的には、CSS3 アニメーションの特性も利用しています。ソース コードを確認したところ、クリックすると、materialUI がクリック位置に応じてさまざまな位置でアニメーション化されることがわかりました。これは非常に興味深いことです。まずは、このような複雑な例については触れないことにします。CSS3 ソリューションを使用して同様の効果を実現してみましょう。著者が実現した効果は次のとおりです。

上の画像はReactをベースにカプセル化したButtonコンポーネントなので、ステップごとに実装してみましょう。

1. 原則

このアニメーションの原理は実はとてもシンプルです。CSS3 のトランジション アニメーションと ::after 疑似オブジェクトを使用してこれを実現します。要素をクリックすると、:active 疑似クラスがアクティブになります。次に、この疑似クラスに基づいて ::after 疑似オブジェクトの背景をアニメーション化できます。疑似コードは次のとおりです。

.xボタン{ 
  位置: 相対的; 
  オーバーフロー: 非表示; 
  表示: インラインブロック; 
  パディング: 6px 1em; 
  境界線の半径: 4px; 
  色: #fff; 
  背景色: #000; 
  user-select:none; // ユーザーが選択できないようにします。cursor:pointer; 
} 
 
.リップル{ 
  &::後 { 
    コンテンツ: ""; 
    表示: ブロック; 
    位置: 絶対; 
    幅: 100%; 
    高さ: 100%; 
    上: 0; 
    左: 0; 
    背景画像: 放射状グラデーション(円、#fff 10%、透明 11%); 
    背景繰り返し: 繰り返しなし; 
    背景位置: 50%; 
    変換: スケール(12, 12); 
    不透明度: 0; 
    遷移: 変換 .6s キュービックベジェ(.75,.23,.43,.82)、不透明度 .6s; 
  } 
  &:active::after { 
    変換: スケール(0, 0); 
    不透明度: .5; 
  } 
}

上記のコードは、変換のスケールと透明度を設定し、グラデーションの放射状背景画像を設定することで、水の波紋アニメーションを実装しています。よりエレガントなアニメーションを実現するために、上記の CSS アニメーションは、さまざまな形式のベジェ曲線を生成できるオンライン ツール cubic-bezier を使用して実装できます。ツールは次のようになります。

2. コンポーネント設計のアイデア

上記のコードではボタンクリックアニメーション効果を実現できますが、汎用的ではなく、経験豊富なプログラマーのスタイルに準拠していないため、どこでも使用できるように、段階的に汎用ボタンコンポーネントにカプセル化します。

コンポーネントの設計思想は、アリ設計モデルに基づいています。開閉の原則に基づいて、拡張可能なボタンコンポーネントには一般に次の特性があることがわかります。

  • ユーザーがボタンのスタイルを変更できるようにする
  • ボタンイベントメソッドを外部に公開する
  • ボタンのテーマと外観の設定を提供する
  • プラグイン可能かつ組み合わせ可能 上記の点に基づいて、この React コンポーネントを設計してみましょう。

3. ReactとCSS3に基づくボタンコンポーネントの具体的な実装

まず、コンポーネントは react を使用して実装されています。技術的な点では、より一般的な umi スキャフォールディング、classnames ライブラリ、および css モジュールを使用します。コードは非常にシンプルです。見てみましょう。

'classnames' からクラス名をインポートします 
'./index.less' からスタイルをインポートします 
 
/** 
 * @param {onClick} func 外部に公開されるクリックイベント * @param {className} string カスタムクラス名 * @param {type} string ボタンタイプ primary | warning | info | default | pure 
 * @param {shape} 文字列 ボタンの形状 円 | 半径 (デフォルト) 
 * @param {block} ブール型ボタン表示 true | false (デフォルト) 
 */ 
デフォルト関数 Button(props) をエクスポートします。 
  let { children, onClick, className, type, shape, block } = props 
  戻り値 <div 
            className={classnames(styles.xButton、styles.ripple、styles[type]、styles[shape]、block ?styles.block : '', className)} 
            onClick={onClick} 
        > 
            { 子供たち } 
        </div> 
}

これはボタンの js 部分であり、コンポーネント設計の核でもあります。ボタン コンポーネントは、onCpck、className、type、shape、block などのプロパティを公開します。className は、コンポーネントのクラス名を変更してコンポーネントのスタイルを制御するために使用されます。type は主にコンポーネントのスタイルを制御するために使用され、antd のプライマリ スタイルに似ています。shape は、丸いボタンか丸いボタンかを制御するために使用されます。block は、ボタンがブロックかどうかを制御するために使用されます。具体的な形式は次のとおりです。

最適化された CSS は次のようになります。

.xボタン{ 
  ボックスのサイズ: 境界線ボックス; 
  表示: インラインブロック; 
  パディング: 6px 1em; 
  境界線の半径: 4px; 
  色: #fff; 
  フォントファミリー: 継承; 
  背景色: #000; 
  user-select:none; // ユーザーが選択できないようにします。cursor:pointer; 
  テキスト配置: 中央; 
  &。主要な { 
    背景色: #09f; 
  } 
  &。警告 { 
    背景色: #F90; 
  } 
  &。情報 { 
    背景色: #C03; 
  } 
  &。純粋な { 
    境界線: 1px 実線 #ccc; 
    色: rgba(0, 0, 0, 0.65); 
    背景色: #fff; 
    &::後 { 
      背景画像: 放射状グラデーション(円、#ccc 10%、透明 11%); 
    } 
  } 
 
  // 図形&.円{ 
    境界線の半径: 1.5em; 
  } 
 
  // 親要素に適応する&.block { 
    // 幅: 100%; 
    表示: ブロック; 
  } 
} 
 
.リップル{ 
  位置: 相対的; 
  オーバーフロー: 非表示; 
  &::後 { 
    コンテンツ: ""; 
    表示: ブロック; 
    位置: 絶対; 
    幅: 100%; 
    高さ: 100%; 
    上: 0; 
    左: 0; 
    ポインタイベント: なし; 
    背景画像: 放射状グラデーション(円、#fff 10%、透明 11%); 
    背景繰り返し: 繰り返しなし; 
    背景位置: 50%; 
    変換: スケール(12, 12); 
    不透明度: 0; 
    遷移: 変換 .6 秒、不透明度 .6 秒; 
  } 
  &:active::after { 
    変換: スケール(0, 0); 
    不透明度: .3; 
    //初期状態遷移を設定します: 0s; 
  } 
}

ボタン スタイルの切り替えは、属性とクラス名を高度に関連付ける CSS モジュールによってもたらされる高い柔軟性を使用して完全に実現されます。次に、その使用方法を見てみましょう。

// インデックス.js 
'@/components' から { Button } をインポートします。 
'./index.css' からスタイルをインポートします 
デフォルトの関数をエクスポートする(){ 
  戻る ( 
    <div className={styles.normal}> 
      <Button className={styles.btn}>デフォルト</Button> 
      <Button className={styles.btn} type="warning">警告</Button> 
      <Button className={styles.btn} type="primary">プライマリ</Button> 
      <Button className={styles.btn} type="info">情報</Button> 
      <Button className={styles.btn} type="pure">純粋</Button> 
      <Button className={styles.btn} type="primary" shape="circle">円</Button> 
      <Button className={styles.mb16} type="primary" block>プライマリ&ブロック</Button> 
      <Button type="warning" shape="circle" block onClick={() => { alert('block')}}>circle&block</Button> 
    </div> 
  ) 
}

先ほど見たボタンのスタイルは、上記のコードによって生成されました。簡単ですよね? クリック効果をもう一度見てみましょう。

実はReactだけではありません。同じ原則を使って、ボタンコンポーネントのVueバージョンやコンポーネントのAngularバージョンを実装することができます。単なる構文になります。このようなコンポーネント設計の考え方や要素は、単一責任の原則、コンポーネントの開閉の原則、分散化、構成可能性など、多くのUIライブラリで公式に使用されています。今後、皆さんのコンポーネント設計の参考になれば幸いです。

純粋な CSS を使用して MaterialUI のようなボタン クリック アニメーションを作成し、それを React コンポーネントにカプセル化する方法については、これで終わりです。CSS MaterialUI ボタン​​ クリック アニメーションに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Native 開発パッケージ トーストと読み込み コンポーネントの読み込み例
  • React Form コンポーネント実装のカプセル化
  • React チュートリアル: Portal の再利用可能なコンポーネントをカプセル化する方法
  • React Native 通知メッセージの垂直カルーセル コンポーネントのカプセル化

<<:  従来の Tomcat スタートアップ サービスと Springboot スタートアップ組み込み Tomcat サービス (推奨) の違い

>>:  MySQL sql_mode の変更が有効にならない理由と解決策

推薦する

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続

落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...

擬似静的およびクライアント適応型 Nginx の設定方法

バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...

MySQL コール初心者が犯しがちな 11 の間違いのまとめ

序文セキュリティ部門からSQLインジェクションやXSS攻撃の脆弱性などに関する警告メールを頻繁に受け...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

Dockerパッケージイメージの実装と構成の変更

最近、Docker の学習や実際の運用で多くの問題に遭遇したので、それを記録するためにブログを書きま...

Docker の Windows ストレージ パス設定操作

Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

DockerでGit環境を構築して構成するプロセス

DockerでGit環境を構成する仕事上、Docker 環境で GitLab リポジトリを操作する必...

IDEA の Docker プラグインを介して SpringBoot プロジェクトをデプロイするプロセスの詳細な説明

1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

開発者とオペレーターが注目すべき Linux デバッグ ツール [推奨]

システム パフォーマンスの専門家である Brendan D. Gregg 氏は、LinuxCon N...