CSS3 の派手な使い方transition_html/css_WEB-ITnose

友達リンクの交換へようこそ Laker's Blog--The Attacking Program Yuan

Github: https://github.com/younglaker

Weibo: Jiang Xiaohu Laker

この記事では、hover、:active、:focus、:checked、メディア クエリ、JavaScript コントロールの CSS3 遷移をトリガーする 6 つのメソッドと、transitionend を紹介します。イベント利用。

:hover

最も一般的なのは hover を使用することです:

<div class="hover">:hover</div>.hover {  width: 100px;  height: 100px;  background: #222;  color: white;  text-align: center;  transition: all 2s ease;}.hover:hover {  width: 200px;  height: 200px;}

デモ

:active

マウスダウン時にトリガーされます:

<div class="active">:active</div>.active {  width: 100px;  height: 100px;  background: #222;  color: white;  text-align: center;  transition: all 2s ease;}.active:active {  width: 200px;  height: 200px;}

デモ

:focus

テキスト ボックスがフォーカスされているとき (これは多くの Web サイトの検索ボックスのアニメーション効果で使用されます):

<div class="focus">  <input type="text" /></div><div class="focus">  <textarea name="" id="" cols="30" rows="10"></textarea></div>.focus input, .focus textarea {  width: 200px;  transition: width 1s ease;}.focus input:focus, .focus textarea:focus {  width: 300px;}

デモ

:チェック済み

チェックボックスとラジオボタン用 チェックすると:

<div>    <input type="checkbox" name="things" value="thing1"> Input 1<br>    <input type="checkbox" name="things" value="thing2"> Input 2<br>    <input type="checkbox" name="things" value="thing3"> Input 3<br>  <input type="checkbox" name="things" value="thing4"> Input 4<br></div>    input[type="checkbox"]:checked {  height: 20px;  transition: all 1s ease;}input[type="checkbox"]:checked {  width: 30px;}

デモ

メディアクエリ

ブラウザのウィンドウ サイズが変更されるとトリガーされます:

<div class="media">media</div>.media {  width: 200px;  height: 200px;  background: #222;  color: white;  text-align: center;  transition: width 1s ease;}@media only screen and (max-width : 960px) {  .media {    width: 100px;    height: 100px;  }}

デモ

JavaScript イベントが CSS3 遷移をトリガーします

完了するには JavaScript または jQuery を介してクラスを追加および削除しますアニメーション、CSS 形式は hover に似ています。

例:

クリックイベントを例にとると、正方形をクリックすると、長さ、幅、背景色が変わります:

HTML:

<div class="box"></div>

CSS :

.box {  width: 200px;  height: 200px;    background: black;  -webkit-transition: all 2s ease;  -moz-transition: all 2s ease;  -o-transition: all 2s ease;  transition: all 2s ease;}.box.clicked {  width: 300px;  height: 300px;    background: blue;}

JavaScript:

$(".box").click(function() {    $(this).toggleClass("clicked");});

デモ

ネイティブ JavaScript を使用する場合は、追加および削除する独自の関数を作成できますクラス。

transitionend イベント

transitionend イベントは、CSS トランジションの終了後にトリガーされます。 Chrome、Firefox、Safari、IE10 以降との互換性:

element.addEventListener('transitionend', callback, false);

下位バージョンとの互換性を確保するには、webkitTransitionEnd (WebKit)、otransitionend (Opera)、MSTransitionEnd (IE 10+)、transitionend (Mozilla) を記述できます。 。 詳細については、このディスカッションを参照してください。

グラデーションが始まるイベントはありますか？現在、IE 10+ のみにtransitionstart イベントがあり、W3C には現在この標準がありません。