CSS3 移行エクスペリエンスの読み込み後にコンテンツ読み込みの高さが変更される optimization_html/css

CSS3 移行エクスペリエンスの読み込み後にコンテンツ読み込みの高さが変更される optimization_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:19:20

オリジナル

1138 人が閲覧しました

1. こんにちは、シャオメイ

この「シャオメイ」は東四街のシャオメイではなく、「小さくて美しい研究」の略語で、数分で取得し、十分な量を蓄積します質的な変化に変わります。

この記事はこのカテゴリに分類され、洗練された結果は約 10 行のコードになります。

現在、Web テクノロジーが発展し続けているため、ビューとデータのレンダリングはフロントエンドによって提供されることが多くなり、より多くのデータがバックグラウンドで処理されます。したがって、このようなインタラクティブなシーンが頻繁に見られます。ページがロードされると、フレーム内で菊の花が回転し、コンテンツが表示されます。または、ボタンをクリックすると菊の花が回転し、リストが動的にロードされて表示されます。例:

何か問題はありますか?確かに、機能は問題なく、菊もあり、ユーザーは喜んで待ちます。しかし、特にコンテンツが動的で不確実性が高い場合、菊の出現からコンテンツの出現に至るまで、すべてのインタラクションが堅苦しく感じられたことはありませんか?より優れたモバイルアプリ (WeChat など) を使用すると、このように感じることはありません。対話プロセス全体は非常にスムーズで、まるで巨人が歩いてくるようなものではなく、渓流の湧き水が山のふもとに流れ出るようにです。渓谷を感じます。

そのため、菊の表現からコンテンツの表現までを自然なアニメーションの遷移で表現できれば、ユーザーエクスペリエンスは間違いなく向上します。

動的コンテンツのプレゼンテーションにおける主な変更点は高さであり、トランジション効果に最適なツールは CSS3 トランジションであるため、CSS3 トランジションを使用できるかどうか疑問に思わずにはいられません。動的コンテンツの高度にアニメーション化されたプレゼンテーションを実現し、ユーザーエクスペリエンスを向上させます。

実際、私は 2012 年の早い時期にこの側面を試し始めました。興味がある場合は、この記事をチェックしてください:「詳細 | インタラクションにおけるトランジションアニメーションのプログレッシブ使用を折りたたむ」。私も自分で調べてみましたが、当時の私のくだらない話の能力は今よりも2倍優れていました。パート 5 から直接読むことができます。中でも、当時のちょっと未熟な技術のせいで、コンテナの高さを求める方法がちょっとバカバカしかったので、みんな見て見ぬふりをしていました。

2. CSS3 移行の難しさ

1 行の CSS コードで動的なプレゼンテーションをアニメーション化できるのであれば、この記事は必要ありません。すべてのサイトにはすでにこの種の高品質なインタラクションが備わっています。根本原因は「auto」に無頓着なCSS3トランジションの制限です！どういう意味ですか？

いわゆる「遷移」とは、ある場所から別の場所へ、たとえば 0 から 100 へ移行することであることは誰もがよく理解しています。しかし、0 から自動に移行すると、あなたは唖然とするでしょう。大学時代に「テレポーター」というアメリカのSF映画を見たんですが、その中で男性の主人公は、望んですぐに移動するだけではなく、目的地と経路を知る必要がありました。

ただし、動的コンテンツを div で提示する場合、内部のコンテンツがわからないため (動的であると言われます)、高さは実際には自動なので、transition: height が 35 秒後には、必要なのは固定値です。

ここで、難しい点と重要なポイントが来ます。 固定の高さの値を割り当てるにはどうすればよいでしょうか?

3. 高さの固定値と遷移トリガー

簡単に言うと、現在の高さを固定し、動的コンテンツをロードした後の高さの固定値を取得し、スタイルを設定します。終わった〜

コードの詳細には触れませんが、実際のところ、「必要なのはコードだ、コードだ！」と心の中でそう叫んでいる人は多いでしょう。

すごい

コードは 10 行です。

element はコンテナ要素です。CSS でトランジションを記述する場合、time パラメータは必要ありません。例:

// 高度无缝动画方法var funTransitionHeight = function(element, time) { // time, 数值，可缺省    if (typeof window.getComputedStyle == "undefined") return;        var height = window.getComputedStyle(element).height;    element.style.height = "auto";    var targetHeight = window.getComputedStyle(element).height;    element.style.height = height;    setTimeout(function() {        if (time) element.style.transition = "height "+ time +"ms";        element.style.height = targetHeight;    }, 15);};

ログイン後にコピー

funTransitionHeight 名前が気に入らない場合は、自分で変更できます。 IE9以降は有効、IE10以降はアニメーションあり、IE6～IE8も同様、いわゆるプログレッシブエンハンスメントです。

それについては、聞くよりも見た方が良いです。ここをクリックしてください: 高さが可変の動的要素 CSS3 トランジションのデモ

ページ上の「クリックしてください」ボタンをクリックすると、高さが可変のコンテンツが表示され、誰でも提示された内容を見たら、バンバンバンではなく、歘歘歘〜

なんと呼びますか？非常に簡単です。初期化中に funTransitionHeight() をクリックして固定値を割り当てます。その後、菊が完成してコンテンツが読み込まれるたびに funTransitionHeight() をクリックするとアニメーションが開始されます。つまり、以前の JS コードに比べて funTransitionHeight(element) の呼び出しが 1 行増えただけで、実用的かつ低コストではないでしょうか。