Tik Tok サブスクリプションボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、最近フロントエンドの知識を勉強しているところです。そこで自分でどう実装するかを考えてみたところ、最終的な効果は良かったものの、自分がやったことは十分ではないと感じました。参考用です。

🍻 最終効果

最終結果

💡 アイデア

jQueryのtoggleClass()メソッドを使用して、 activeクラスを追加および削除します。
元の要素とactive要素のスタイルをそれぞれ設定し、CSS transition属性を使用して変更時間や速度などを定義します。
CSS animationを使用して、 active要素の変更アニメーションを設定します。

👨‍💻実装

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="スタイルシート" href="style.css">
    <title>ドキュメント</title>
</head>
<本文>
	<!-- 簡潔にするために、div が使用されます。実際には、ボタンを使用することもできますが、見栄えを良くするためにスタイルを設定する必要があります^_^-->
	<!-- まだ <svg> を学習していないので、<svg> を使用するとより良い結果が得られるかもしれません -->
    <div id="followBtn">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
    <script src="index.js"></script>
</本文>
</html>

$(function () { // jQuery エントリ関数 $('#followBtn').click(function (e) { // クリック イベントをバインド $('#followBtn').toggleClass('active');
        $('#line1').toggleClass('アクティブ');
        $('#line2').toggleClass('アクティブ');
    });
})

体 {
    幅: 1024ピクセル;
    margin: 0 auto; /* 中央 */
}

#フォローボタン{
    位置: 相対的;
    表示: ブロック;
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 100px 自動;
    border-radius: 100px; // div を円形にします background-color: #ccc;
    transition: all linear .5s; // スタイルが変換されるときの遷移アニメーションのプロパティを定義します}

#フォローボタン.アクティブ{
    背景色: 深紅;
}

#行1 {
    position: absolute; /*絶対配置。配置は最も近い位置にある（相対、絶対、固定）祖先要素に基づきます*/
    左: 25px;
    上: 46px;
    表示: ブロック;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 5px;
    背景色: 深紅;
    遷移: すべて線形 .5 秒。
}

#行2 {
    位置: 絶対;
    左: 25px;
    上: 46px;
    表示: ブロック;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 8px;
    背景色: 深紅;
    transform: rotate(90deg); /* 90度回転 */
    遷移: すべて線形 .5 秒。
}

#line1.アクティブ{
    背景色: #ccc;
    /*アニメーションをトリガーします。forward は、アニメーションが終了した後、要素のスタイルがアニメーションの最後のキーフレームのスタイルとして保持されることを意味します */
    アニメーション: ライン 1 .5 秒、前方へのイーズイン アウト;
}

#line2.アクティブ{
    背景色: #ccc;
    アニメーション: ライン2 .5秒のイーズインアウト前進;
}

/* @keyframes はアニメーションを定義します*/
@keyframes 行1 {
    50% {
        幅: 8px;
        高さ: 8px;
        左: 20px;
        上: 52px;
        境界線の半径: 8px;
    }
    100% {
        幅: 30ピクセル;
        左: 20px;
        上: 52px;
        変換: 回転(45度);
    }
}

@keyframes 行2 {
    50% {
        幅: 8px;
        高さ: 8px;
        境界線の半径: 8px;
        左: 35px;
    }
    100% {
        幅: 50px;
        左: 35px;
        変換: 回転(-45度);
    }
}

分割線👇👇👇SVGを使用してチェックマークを描画✔🍻最終的な効果

ここに画像の説明を挿入

👨‍💻実装

html

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="スタイルシート" href="style.css">
    <title>ドキュメント</title>
</head>

<本文>
    <ボタンid="followBtn">
        <div class="line"></div>
        <div class="line"></div>
        <!-- svg を使用して描画 -->
        <!--stroke-linecap はポリラインの角を丸く設定します -->
        <!--stroke-linejoin はポリラインの角を丸く設定します -->
        <svg 幅="70px" 高さ="70px" ストローク幅="8" ストロークラインキャップ="丸型" ストロークライン結合="丸型" 塗りつぶし="なし">
            <ポリライン ポイント="10,37 30,57 60,17" スタイル="stroke: クリムゾン;"></ポリライン>
        </svg>
    </ボタン>
    <script src="index.js"></script>
</本文>

</html>

❗❗❗必ず jQuery 3 を使用してください。バージョン 3 未満では、svg 要素の操作 (クラスの追加) 時にバグが発生します。バージョン 3 ではこの問題が修正されています。

$(関数() {
    $('#followBtn').click(関数(e) {
        $('#followBtn').toggleClass('アクティブ');
        $('.line').toggleClass('active');
        $('ポリライン').toggleClass('アクティブ');
    });
})

体 {
    幅: 1024ピクセル;
    マージン: 0 自動;
}

#フォローボタン{
    位置: 相対的;
    表示: ブロック;
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 100px 自動;
    境界線: なし;
    境界線の半径: 100px;
    背景色: 深紅;
    遷移: すべて線形 .5 秒。
}

#フォローボタン:フォーカス{
    outline: none; /* ブラウザでクリックしても青いボックスは表示されません*/
}

#フォローボタン.アクティブ{
    背景色: #ccc;
}

。ライン {
    position: absolute; /*絶対配置。配置は最も近い位置にある（相対、絶対、固定）祖先要素に基づきます*/
    左: 25px;
    上: 46px;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 8px;
    背景色: #ccc;
    遷移: イーズイン 0;
}

.line:n番目の子(1) {
    変換: 回転(90度);
}

.line.active {
    アニメーション: 0.5 秒先にフェードします。
}

ポリライン
    /*stroke-dasharray プロパティは、曲線を形成するための線の間隔を設定します。
     * 隙間が十分に大きい場合、線は隠れているように見えます * ストロークダッシュオフセットプロパティは、ダッシュパターンからパスの始点までの距離を指定します。0の場合、線は完全に表示されます */
    ストロークダッシュ配列: 80px;
    ストロークダッシュオフセット: 80px;
}

ポリライン.アクティブ{
    アニメーション: 0.5 秒先へ表示します。
    アニメーション遅延: .5秒;
}

@keyframes を表示 {
    に {
        ストロークダッシュオフセット: 0;
    }
}

@keyframes フェード {
    に {
        不透明度: 0;
        変換: 回転(360度) スケール(0.5, 0.5);
    }
}

👨‍🎓インサイト

通常の HTML 要素と SVG 要素は回転方法が異なります。

通常の HTML 要素のtransform-originデフォルトでその中心に設定されます。SVG 要素のtransform-originデフォルトで SVG キャンバスの左上隅に設定されます。

HTML と SVG

ボタンをクリックした後に青いボックスを削除するには、 outline: none;を設定します。

jQuery バージョン 3 未満では、SVG 要素のクラスを正しく変更できません。

//.attr() メソッドは SVG に有効であるため、jQuery を使用する必要がある場合は、.addClass("newclass") の代わりに $("#item").attr("class", "oldclass newclass"); を使用します。
// .removeClass("newclass") の代わりに $("#item").attr("class", "oldclass"); を使用します
// ネイティブ JS ソリューション var element = document.getElementById("item");
// element.setAttribute("class", "oldclass newclass"); を使用します。
// element.setAttribute("class", "oldclass"); を使用します。

🔗参考文献

SVG 要素の変換

jQuery SVG、なぜaddClassができないのですか?

CSS を使用して Douyin サブスクリプションボタンのアニメーション効果を実現する方法については、これで終わりです。CSS Douyin サブスクリプションボタンのアニメーションに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTMLページの読み込みと解析プロセスの詳細な紹介

>>: Docker 環境で JMeter+Grafana+influxdb ビジュアルパフォーマンス監視プラットフォームを構築するチュートリアル