ボタンをクリックした後のCSS読み込み効果を実現する

自社製品にクリック後1～2秒待機時間があるボタン（確認メールを送信する）があるため、クリック後の1～2秒の読み込みウィンドウを回避するために、読み込みアニメーションを作成してユーザーエクスペリエンスを強化しました。当初はgifで直接解決したかったのですが、この機会に練習したかったので、CSSグラデーション効果を使用して実現しました。予想外に効果はかなり良く、divなどの追加要素を追加する必要はありません。 CSSを修正してクリックイベントを追加するだけで完了できます。

効果のデモンストレーション

まずは完成した効果を見てみましょう。

実装プロセス

このエフェクトは実はとても簡単に作成できます。まずは元のボタンを見てみましょう。これは CSS が適用された単なる div です。

HTML:

<div class="btn">クリックしてください</div>

CS: ...

.btn{
  位置:相対;
  幅:200px;
  高さ:30px;
  行の高さ:30px;
  テキスト配置:中央;
  境界線の半径:3px;
  背景:#5ad;
  色:#fff;
  カーソル:ポインタ;
}

次のようになります (非常にシンプルな CSS です):

それで、どうやってアニメーションを追加するのでしょうか?このとき、CSS 疑似要素を使用し、その上に before 疑似要素を置き、この疑似要素内にアニメーションを配置する必要があります。

CS: ...

.btn::before{
  コンテンツ:"読み込み中";
  位置:絶対;
  幅:200px;
  高さ:30px;
  行の高さ:30px;
  テキスト配置:中央;
  境界線の半径:3px;
  zインデックス:2;    
  トップ:0;
  左:0;
  色:#fff;
  テキストシャドウ:rgba(100,0,0,1) 0 0 3px;
  背景:#c00;
}

装着後、元のものが覆われていることがわかります。

原理を理解したら、次のステップはbeforeの背景をアニメーションに変更することです。ここでは2つのCSS3テクニックが使用されています。1つ目はグラデーションの背景で、2つ目はアニメーションです。最初のグラデーションの色はより複雑です。主なことは、グラデーションを45度の方法で塗りつぶすことです。内容は2つの色が互いに一致することですが、グラデーションが滑らかにつながるようにbackground-sizeと調整する必要があります。これは通常、調整に最も時間がかかる場所です。

背景:線形グラデーション(45度、#fc0 0%、#fc0 20%、#fa0 20%、#fa0 45%、#fc0 45%、#fc0 70%、#fa0 70%、#fa0 95%、#fc0 95%、#fc0 100%);
背景サイズ:30px 30px;
背景位置:0 0;

下の写真のように、段階的に調整しないと見た目がうまく繋がらないこともありますが、調整が完了すればスムーズに繋がります。

完了したら、CSS3 アニメーション効果を適用して背景の位置を変更する必要があり、背景は自動的に変更されます。

アニメーション:クリック 1 秒 無限線形;    

@keyframes クリック {
  0%{
    背景位置:0 0;
  }
  100%{
    背景位置:30px 0;
  }
}

この時点で、作業の 80% が完了しています。最後のステップは、クリックイベントを追加することです。ここで行うことは、display:none で疑似要素を非表示にし、click というクラスを追加することです。ボタンをクリックすると、ボタンに click クラスが適用され、疑似要素が表示されます。以下は完全なコードですが、少し簡略化されており、ボタンはクリックして 2 秒後に元の状態に戻ります。

CS: ...

.btn,.btn::before{
  幅:200px;
  高さ:30px;
  行の高さ:30px;
  テキスト配置:中央;
  境界線の半径:3px;
}
.btn{
  位置:相対;
  背景:#5ad;
  色:#fff;
  カーソル:ポインタ;
}
.btn::before{
  コンテンツ:"読み込み中";
  位置:絶対;
  表示:なし;
  zインデックス:2;
  トップ:0;
  左:0;
  色:#fff;
  テキストシャドウ:rgba(100,0,0,1) 0 0 3px;
  背景:線形グラデーション(45度、#fc0 0%、#fc0 20%、#fa0 20%、#fa0 45%、#fc0 45%、#fc0 70%、#fa0 70%、#fa0 95%、#fc0 95%、#fc0 100%);
  背景サイズ:30px 30px;
  背景位置:0 0;
  アニメーション:クリック 1 秒 無限線形;
}
.btn.click::before{
  表示:ブロック;
}
@keyframes クリック {
  0%{
    背景位置:0 0;
  }
  100%{
    背景位置:30px 0;
  }
}

jQuery:

$(関数(){
  var タイマー;
  $('.btn').on('クリック',function(){
    $('.btn').addClass('クリック');
    タイマーをクリアします。
    タイマー = setTimeout(関数(){
      $('.btn').removeClass('クリック');
    },2000);
  });
});

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

<<: HTML ブロックレベルタグとインラインタグの違い

>>: VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します