JS の代わりに CSS3 を使用してインタラクションを実現する方法の分析例

[CSS3 と JS]

CSS を知っている学生は皆、CSS の実装が、実装とパフォーマンスの点で CSS3 アニメーションと JS アニメーションに匹敵することを知っています。この 2 つを比較してみると、より明確になります。フロントエンド フレームワークを使用すると、ページ アニメーションで CSS3 がますます使用されるようになります

[CSS3 のその他の用途]

アニメーションの置き換えに加えて、インタラクションの実装には CSS の機能も反映されており、CSS3 によって提供されるセレクターがより多く使用されています

まず例を見てみましょう: 今回は CSS についての私の深い理解をよりよく反映できます

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.list__con .input:checked::after{content:&#39;&#39;;width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:&#39;&#39;;position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.list__con .delete::before{content:&#39;&#39;;position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
</style>
<div class="list__con">
    <div class="box">
        <div class="delete"></div>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </div>
</div>

[説明]

上記には多くのインタラクション、ホバーインタラクション、チェックされたインタラクションが含まれています。

上記の実装方法はすでに実装されていると思います。ここでは主に、私がこれまでに 4 年間取り組んできたテクノロジーについての洞察について話します。この何年かで、私は自分がどれだけ早く成長したかを知っていますが、多くの知識とそれを活用する方法を知っていることは同じですが、今回は、ただ知っているということが何を意味するのかを本当に理解しました。つまり、本当の意味はわかりません、なぜですか？

以前はCSSとJSを組み合わせて上記のインタラクティブ効果を実現していましたが、この時期もCSSを使ってインタラクティブ効果を実現してみましたが、模索しているうちに自分なりのやり方に行き詰ってしまいました。私は今まで元のアイデアを実際には理解していませんでした

CSS を使用して完全に実装することの利点は、再利用性と保守性が向上し、対応するコンポーネントを実装するためのより良い方法が提供され、パフォーマンスも向上します

.list__con .input:checked+label

; , CSS3 によって追加されたさまざまな強力なセレクターを使用して、より多くのより優れたインタラクティブな効果を実現できます。今後は、JS を使用して DOM を変更するという悲劇から離れ、CSS にもっと傾倒していきます。

以上がJS の代わりに CSS3 を使用してインタラクションを実現する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。