ホームページ > 記事 > ウェブフロントエンド > CSS3トランジションのトリガー方法は何ですか?
CSS3トランジションのトリガー方法は何ですか?
- 青灯夜游オリジナル
- 2021-12-15 11:20:192797ブラウズ
css3 トランジションには 2 つのトリガー方法があります: 1. ":hover"、":focus"、":checked" などを含む疑似クラス要素によってトリガー; 2. を使用して JS によってトリガーjs または Jquery このコードは CSS プロパティを変更し、トランジションのグラデーションをトリガーします。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#transition
トランジションは CSS3 の最も単純なアニメーションです。要素のプロパティが変化すると、グラデーションで表示できます。次のコードは例です。 w3c では、トランジションを追加した結果、ホバー時に長さが徐々に 300px まで増加します。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>css3 トランジション トリガー メソッド
最初の方法:パス ホバー、フォーカス、チェックなどの疑似クラス要素がトリガーされます。
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box:hover{
width: 400px;
}
</style>
<p class="box"></p>しかし、実際の使用では、属性を直接変更するために JS または Jquery を使用することがほとんどですが、これはそうではないことがわかりました。仕事。
2 番目: JS を通じてトリガーされる
JS または Jquery を使用して CSS プロパティを直接変更する場合
JS トリガー メソッドは、そのクラスを変更する必要があります。新しいスタイルを手に入れることができますように。
私の理解では、要素を変更して新しい属性を取得できるようにする必要があるということです。これは疑似クラス トリガーの場合です。JS トリガーの場合は、そのクラスが変更される必要があります。新しいスタイルを手に入れることができるということ。
新しいクラスを p に追加し、p を変更してクラスを取得することにより、遷移の勾配をトリガーできます。
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box1{
width: 400px;
}
</style>
<p class="box"></p>
<scrpit>
setTimeout(() => {
let element = document.getElementsByClassName('box')[0];
element.classList.add('box1')
}, 1)
</scrpit>(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSS3トランジションのトリガー方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。