CSS3トランジションのトリガー方法は何ですか?-フロントエンドQ&A-php.cn

CSS3トランジションのトリガー方法は何ですか?

青灯夜游

リリース： 2021-12-15 11:20:19

オリジナル

2817 人が閲覧しました

css3 トランジションには 2 つのトリガー方法があります: 1. ":hover"、":focus"、":checked" などを含む疑似クラス要素によってトリガー; 2. を使用して JS によってトリガーjs または Jquery このコードは CSS プロパティを変更し、トランジションのグラデーションをトリガーします。

CSS3トランジションのトリガー方法は何ですか?

このチュートリアルの動作環境: 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(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)

    }, 1) 
</scrpit>

ログイン後にコピー

(学習ビデオ共有: css ビデオチュートリアル)

以上がCSS3トランジションのトリガー方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。