CSS3 の概要transition_html/css_WEB-ITnose

前の記事では CSS3 のtransform属性を紹介しましたが、この記事では別の人気のあるアニメーション属性であるtransitionを紹介します。遷移は実際にはスムーズな遷移アニメーションであり、基本的にプロパティを開始値から終了値まで線形時間で遷移させます。たとえば、フォーカスを獲得したりマウスをクリックしたりするアクションにより、CSS プロパティの値が瞬時に変更され、少し硬く感じられます。遷移を使用すると、ユーザー エクスペリエンスを向上させるために、一定期間内の属性値のスムーズな遷移を指定できます。

4 つのトランジション

• スイッチトランジションと永続トランジション
  • 自動トランジション
  最初に体験するには、ここをクリックしてください
  4 つのサブプロパティ
  トランジションには、transition-property、transition-duration、transition の 4 つのサブプロパティがあります。 -timing-function、transition-delay
• transition-property
遷移する必要がある CSS プロパティを指定します。すべてのプロパティを移行できるわけではありません。デジタル的に定量化できる CSS プロパティのみを移行できます。数値化できる CSS プロパティとは何ですか?例:
color、background-color、border-color、outline-color などのカラーシステム。
数値システム、幅、高さ、上、右、下、左など、多すぎます。ズーム、不透明度、行の高さ、背景の位置、単語の間隔、フォントの太さ、垂直方向の配置、アウトラインのアウトセット、Z インデックスなど。
可視性などの 01 シリーズ (0 は非表示を意味し、1 は表示を意味します)
グラデーション、シャドウなどの詳細な分類については、W3C のプロパティ タイプのアニメーションを参照してください。1 つずつリストするわけではありません。 W3C には、Properties from CSS と呼ばれる移行可能なプロパティのリストもあります。一般に、数値 (% パーセンテージを含む) を設定できる属性はすべて移行できます。

単一の指定プロパティに加えて、transition-property を all に設定することもできます。これは、すべてのプロパティがトランジション効果を受けることを意味します。

transition-duration

遷移に必要な時間。単位は s 秒または ms ミリ秒で指定できます。デフォルト値は 0 で、即時変更を意味します。複数の遷移属性が設定されているが、各属性の遷移時間が同じである場合、transition-duration に複数の値を設定する必要はなく、1 つの値を設定するだけで、この値が適用されます。すべての遷移属性。

transition-timing-function

遷移関数には、linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)、steps が含まれます。実際、それらはすべてベジェ曲線です。以下の通りです

ベジェ曲線を見ると、リニアは均一な遷移、イーズは​​最初は速く、次にゆっくりというリズム、イーズインは加速するスプリントのリズム、イーズアウトは減速から停止までのリズム、イーズインアウトは最初に加速してから減速するというリズムです。

現在、アニメーションの精度はますます高くなっており、これらの事前定義された関数ではニーズを満たせない場合は、cubic-bezier(n,n,n,n) を使用して滑らかな曲線をカスタマイズできます。上の図から、ベジェ曲線には 4 つの点があることがわかります。左下は座標が (0,0) に固定された開始点 P0、右上は座標が固定された終了点 P3 です。 (1,1) で、真ん中に P1 と P2 の 2 つの点があります。P2 の座標は cubic-bezier(n,n,n,n) のパラメータです。 4本の直線をつなげて滑らかな曲線を作ります。百聞は一見に如かず:

ベッセル関数のコードを頭の中で書きたいと思ったら、それは難しいかもしれません。幸いなことに、自分で計算を行う必要はありません。ツール Web サイト (Bezier Cube など) にアクセスして、目的の効果を実現するコードを自動的に生成できます。このサイトでは、リニア、イーズ、イーズイン、イーズアウト、イーズインアウトの違いも体験できます。

ステップでは、移行フェーズを複数の同等のステップに分割できます。それはどういう意味ですか？百聞は一見にしかず:

ステップ関数には 2 つのパラメータがあります。最初のパラメータは分割数であり、設定されていない場合のデフォルトは です。終わり。したがって、steps(4, start) は step-start(4) と同等であり、steps(4, end) は step-end(4) と同等です。たとえば、steps(4, end) はベジェ曲線のような滑らかな遷移ではなく、遷移プロセスを最初から最後まで 4 つのステップに分割し、各ステップで瞬時に遷移を完了することに相当します。上の例で示したように、わかりやすいです。

transition-delay

遷移を開始する時間を遅延します。これは、遅延なしで、遷移アクションがすぐに開始されることを意味します。単位は s 秒または ms ミリ秒です。 w3cschool が述べていないのは、この属性は負の時間に設定することもできます。これは、トランジション アクションがこの時点から開始され、前のトランジション アクションは表示されないことを意味します。信じられない場合は、試してみてください。負の遅延時間は確かにアニメーションでは便利ですが、トランジションでは何に役立つのかわかりません。

これら 4 つのサブ属性を個別に指定することも、背景や他の属性と同様に、組み合わせてトランジション属性で指定することもできます。ただし、トランジション期間とトランジション遅延は両方とも時間であるため、ブラウザは順序に従って最初の時間をトランジション期間、2 回目をトランジション遅延と見なすため、マージする場合は注意してください。

個別に指定するか統合するかについて標準的な答えはありません。それらを個別に指定すると、コードが読みやすくなる場合があります。ただし、ページをさまざまなブラウザーに適応させる必要がある場合は、それぞれに -ms-、-moz- などのプレフィックスを付ける必要があり、コードが多くなり、結合されたコードはわずかに少なくなります。さらに、トランジション: 背景 1 秒、線形 2 秒、境界半径 2 秒、イーズイン 3 秒など、複数のトランジション効果を同時に指定することもできます。

トランジションをトリガーする方法

一般的なトリガーは、hover、:focus、:active、:checked などの疑似クラス トリガーです。 @media などのメディア クエリもあります。これは、デバイス サイズに基づいて水平画面と垂直画面を切り替えるときにトリガーされます。クリックやキーダウンなどの JS イベントもトリガーされます。ページの読み込みをトリガーすることもできるので、1 つずつリストしません。つまり、遷移の本質は時間内で属性値をスムーズに遷移させることであり、それがどのようにトリガーされるかは関係ありません。

移行終了イベント

移行には時間がかかるため、当然イベントが発生します。 MDN を参照すると、transitionend イベントがあり、その名前が示すように、このイベントは遷移が終了するとトリガーされます。しかし、今回の事件はかなり残念です。たとえば、パディングを遷移する場合のコードは次のとおりです。

#tempDiv {    padding: 1px;    transition-property: padding;    transition-duration: 1s;}#tempDiv:hover {    padding: 5px;}function showMessage() {    console.log('finished');    //过渡结束时触发打印log}var element = document.getElementById("tempDiv");element.addEventListener("transitionend", showMessage, false);

このコードをブラウザに貼り付けて試してみると、4 つのログが表示されます。トランジション属性はパディングを指定しているため、padding-top、padding-right、padding-bottom、および padding-left トランジションの終了時に、transitionend イベントがトリガーされます。したがって、ログは 4 回出力されます。

上記のCSSでtransition-property:padding;をallに変更すると、これも4回トリガーされます。 transition-property:padding-top; に変更しない限り、これは 1 回しかトリガーされません。パディング、マージン、ボーダーなどのプロパティを使用するには、transitionend イベントが複数回キャプチャされます。

暗黙的なトランジション

トランジション 属性を em に設定するなど、トランジション時にいくつかのあいまいな状況が発生することがあります。ご存知のとおり、em は font-size に基づいて計算されます。同様に、rem、vh、vw などはすべて、別の属性の値に基づいてその値を計算します。たとえば、padding:2em; の場合、font-size が変更された場合、padding の「書き込まれた値」は変更されず 2em のままですが、「実際の値」は変更され、トランジション遷移がトリガーされます。これを「暗黙的遷移」と呼びます。ほとんどのブラウザは暗黙的な遷移を実装しますが、IE は非常に特殊であると噂されています。私はそれがどれほど特殊であるかを試していません。試しずに噂を信じるのは非常に不謹慎なように思えますが、IE のこれまでの評判を考えると、むしろ信じたいと思います...フロントエンド エンジニアでもそれを理解しています。

スイッチトランジションとパーマネントトランジション

スイッチトランジションとは、その名の通り、トリガーソースのイベント終了後に元の状態に戻ることを意味します。永続的な遷移とは、遷移後に元の状態に戻らないことを意味します。上記の例はすべてスイッチ遷移であり、マウスホバーイベントが終了すると、画像は元のサイズに戻ります。ただし、トランジションが永続的な場合、マウス ホバー イベントが終了した後も、画像は拡大されたサイズを維持します。百聞は一見に如かず、ここをクリックしてください

//开关过渡.transition {     transition: all 1s ease-in-out;}.transition:hover {    transform: scale(1.5);}//永久过渡.forever {     transition: all 1s ease-in-out 999999s;}.forever:hover {     transform: scale(1.5);    transition: all 1s ease-in-out;}

元のサイズに戻るまでの遷移期間が長く設定されているため、理論的には 999999 秒で、ページの終了後の遷移が確認できます。有効期間は 12 日間ですが、現実は永続的な移行と同等です。このトリックには JS スクリプトは必要ありません。

自動遷移

通常、属性を遷移する場合、それは固定値から固定値への遷移です。たとえば、幅: 100px が 200px に遷移します。ただし、width:auto に移行すると機能しません。トランジション:幅 1s リニアを指定しても、1 秒のスムーズなトランジション効果はまったくありませんが、トランジション効果が必要な場合は、ここをクリックしてください

.div1 {    background-color: red;    width: 100px;    height: 50px;}#box1:hover {    width: auto;    transition: width 1s linear;}<div id="box1" class="div1"></div>

auto を固定値に変換する必要があります。そこで問題は、どうやって変換するかということです。 getComputedStyle を通じて auto の後の固定値を取得した後、style を通じて値を設定し、CSS トランジション効果をトリガーする必要があります。ここをクリックしてください

window.onload = function(){    var box = document.getElementById("box2"),        originWidth = box.clientWidth,        width2AutoLater = null,        width2OriginLater = null;    var width2Auto = function(element, time) {        if (typeof window.getComputedStyle == "undefined") return;        var width = window.getComputedStyle(element).width;        element.style.width = "auto";        var targetWidth = window.getComputedStyle(element).width;        element.style.width = width;        setTimeout(function() {            element.style.transition = "width "+ time +"ms linear";            element.style.width = targetWidth;        }, 10);    };    var width2Origin = function(element, time) {        setTimeout(function() {            element.style.transition = "width 0s linear";            element.style.width = originWidth + "px";        }, 10);    };    function callLater(func, paramA, paramB){         return function(){              func.call(this, paramA, paramB);          };      }      width2AutoLater = callLater(width2Auto, box, 1000);    width2OriginLater = callLater(width2Origin, box, 1000);    box.addEventListener("mouseenter", width2AutoLater);    box.addEventListener("mouseleave", width2OriginLater);}<div id="box2" class="div1"></div>

コードを辛抱強く見れば理解できるはずです。 CSS は使用せず、トランジション効果を実現するために完全に JS に依存します。

アイデア: ホバー効果をシミュレートするために、div のマウスエンター イベントとマウスリーブ イベントを登録します。

mouseenter は width2Auto 関数にバインドされており、関数内では div の幅を一時的に auto に設定した後、getComputedStyle を使用して幅の値を取得し、幅の値を設定して div のスタイルに遷移します。

mouseleave は、div の幅を初期値に戻す width2Origin 関数にバインドされています。

イベント登録関数addEventListenerの第2引数はコールバック関数名となっているため、コールバック関数にパラメータを渡すことはできません。そこで、closure の機能を利用して、callLater 中間関数を定義し、call を通じて上記 2 つの関数を呼び出します。

概要

これが、私が知っているすべての移行についてです。さまざまなブラウザーによるこの属性のサポートは、まださまざまな古いバージョンのブラウザーに注意する必要がない限り、十分であるはずです。詳細。 Tencent のこの記事を参照してください。