CSSトランジションを使用したトリガー方法は何ですか?

トリガー方法は次のとおりです: 1. 疑似クラス要素「:hover」によってトリガーされ、構文は「要素 {遷移: 属性遷移時間} 要素:hover {属性: 属性値}」です。2. "element.classList .add("要素名")" ステートメントにより、CSS トランジション効果がトリガーされます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

最初のタイプ: 疑似クラス要素によってトリガーされる

	<style>
		.box{
      		width: 100px;
      		height: 100px;
      		background-color: blueviolet;
      		transition: width 1s linear .5s;
    	}
    	.box:hover{
      		width: 400px;
    	}
	</style>
	<p class="box">
    </p>

2 番目のタイプ: JS によってトリガーされる

js を通じて追加される場合は、一定の遅延が必要です (遅延の削除には効果なし) 要素のスタイルを変更する

<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 ビデオ チュートリアル

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