このマニュアルでは、「 遷移 」CSSのプロパティ。
CSSでトランジションを使用してDivを表示および非表示にする方法は?
CSS「 遷移 」プロパティを使用すると、特定の期間に基づいてプロパティの値を簡単に変更できます。状態に応じて、フローティング要素またはアクティブ要素になります。さらに、CSS の transition プロパティを使用して、HTML で div を表示および非表示にします。
それでは、遷移プロパティの構文に移りましょう。
構文
トランジション効果を作成するときは、次の 2 つのことを指定する必要があります。
基本的、 ' 遷移 」は、以下に示す 4 つの他のプロパティで構成される省略形のプロパティです。
遷移 : 遷移プロパティ遷移期間遷移タイミング関数遷移遅延
言及されたプロパティの説明は次のとおりです。
- 遷移プロパティ: 遷移を任意の CSS プロパティに設定するために使用されます。幅、高さ、不透明度など。
- 移行期間: トランジションの期間を指定するために使用されます。
- 遷移タイミング関数: 遷移の速度を設定するために使用されます。
- 遷移遅延: トランジションが開始または遅延する時間を指定します。
div の表示と非表示を「 遷移 」CSSのプロパティ。この目的のために、まず、「 分周 」と入力タイプ「 チェックボックス 」。
ステップ 1: Div の作成とスタイル設定
HTML
<センター ><ラベル > Div を表示 > <入力タイプ = 「チェックボックス」 >
>
これ以降、background-color プロパティを使用して div のスタイルを設定し、背景の色を「 RGB(238, 190, 118) 」。 divの高さを「 150px 」とその周りの境界線を「 10px 」、「 海嶺 '、 と ' RGB(6, 56, 2) 」。最後に、font-size を「 50px 」。
CSS
分周 {背景色 : RGB ( 238 、 190 、 118 ) ;
身長 : 150px ;
国境 : 10px 海嶺 RGB ( 6 、 56 、 2 ) ;
フォントサイズ : 50px ;
}
上記のコードの出力を以下に示します。ここでは、div とチェックボックスが正常に作成されていることがわかります。
次に、遷移プロパティを使用して div を非表示および表示する次のステップに進みます。
ステップ 2: トランジションを使用して Div を表示および非表示にする
これを行うには、「 不透明度 」、その持続時間は「 2秒 」、不透明度の値は「 0 」を CSS で作成した div クラスに追加します。
遷移 : 不透明度 2秒 ;不透明度 : 0 ;
ノート： 「」にトランジションを適用します。 不透明度 要素の透明度を設定するプロパティ。ここでは、その値を「 0 これは、トランジションが開始されると、div が 2 秒間非表示になることを意味します。
トランジション値を設定した後、「 入力 」で HTML ファイルに作成された入力タイプにアクセスし、input 要素の疑似クラスを「 ：チェックあり 」。次に、作成した div にアクセスし、「 + ” 演算子は、チェックボックスを div に関連付けるために使用されます。したがって、チェックボックスで操作が実行されると、その使用法が div に影響します。次に、不透明度の値を「 1 」：
入力 : チェック済み + 分周 {不透明度 : 1
}
ノート： 不透明度の値を「 1 」、つまり、チェックボックスがマークされている場合、作成された div が表示されます。さらに、マークを外してdivを非表示にします
ご覧のとおり、div は「 遷移 「プロパティと」 ：チェックあり 」 疑似クラス要素:
CSSでトランジションプロパティを使ってdivを非表示・表示する方法を解説しました。
結論
div を表示および非表示にするには、「 遷移 「プロパティと」 ：チェックあり ”疑似クラス要素は、div opacity の値が” 0 」、および :checked 疑似クラス要素で、不透明度を「 1 」。ユーザーがチェックボックスをクリックすると div が表示され、チェックを外すと div が非表示になります。このマニュアルでは、transition プロパティを使用して div を非表示および表示する方法について説明しました。