css3アニメーションとjqueryを使用する場合の注意点animation_html/css_WEB-ITnose

少し前にデモを書いていたときに、要素に css3 または jquery アニメーションを追加するときに、アニメーションが終了する前に要素の css 属性を正確に取得できないという問題が発生しました。

1. CSS3 アニメーションのディスカッション

まずコードを見てください:

html:

<div id="hehe"></div><button class="change">change</button><button class="get">get</button>

css:

#hehe {    width: 100px;    height: 100px;    padding: 10px;    background: red;    -webkit-transition: all 10s ease-out;    -moz-transition: all 10s ease-out;    -o-transition: all 10s ease-out;    transition: all 10s ease-out;}

js:

$(document).ready(function() {    $('.change').click(function() {        $('#hehe').width(400);    });    $('.get').click(function() {        console.log($('#hehe').width());    });});

コードは非常に簡単です。 hehe div に赤い背景色を追加し、css3 でアニメーション スムージング効果の css3 trasition を使用しました (css3 trasition の使用方法については、この記事を参照してください: http://www.w3cplus.com/content/css3-transition 、非常に詳細に書かれています）。つまり、幅、高さ、背景、フォントなどの CSS プロパティを変更すると、イーズアウト (速度低下) スムーズ トランジション効果が 10 秒間持続します。たとえば、変更ボタンをクリックすると、hehe の幅が 10 秒かかり、徐々に 400px まで増加し、アニメーション効果が生成されます。

ここで質問が来ます: アニメーションの進行中に取得ボタンをクリックします。コンソールによって出力される「へへ」の幅はどれくらいですか?

変更をクリックすると、要素を検査するときに「ce6fcc1366b86049ecea2ac33716a13d16b28748ea4df4d9c2150843fecfba68」が表示されたので、最初は 400 だと思いました。答えは「いいえ」です。得られるのは、アニメーション中のクリックの瞬間の「ふふふ」の幅です。

コンソール コードを変更します。

console.log($('#hehe').css('width');

これで、アニメーション プロセス全体で、[get] をクリックすると 400 ピクセルが取得されることがわかります。これは、jquery の width() が要素の幅をリアルタイムで取得するのに対し、css('width') は単位も持っているため、単に要素の CSS 値を取得することを示しています。

2.Jqueryアニメーションの議論

jqueryアニメーションは理解しやすいです。 css3 トランジションの css コードを削除し、jquery animate に置き換えます。

$(document).ready(function() {    console.log($('#hehe').width());    $('.change').click(function() {        $('#hehe').animate({width: "400px"}, 10000);    });    $('.get').click(function() {        console.log($('#hehe').width());    });});

jquery アニメーションは実際に要素にスタイルを動的に追加するため、hehe の幅は、width() を使用して取得するか css('width') を使用して取得するかに応じて動的に変化します。ただし、width を使用して取得される幅には単位 px がなく、すべて整数ですが、css('width') を使用して取得される幅には単位があり、小数点以下の桁数が大きくなります。長さ。

まとめ:

ここまで議論しましたが、重要なのは、アニメーションを使用するときに、まだ変化している CSS 属性、特に幅と高さをすぐに取得すると、問題が発生しやすいということです。これらの要素のプロパティを取得するには、アニメーションが終了するまで待つ必要があります。または、アニメーション化する CSS プロパティを指定することもできます。たとえば、アニメーションの幅と高さを取得したいが、実際に必要なアニメーション効果は背景色の変更だけである場合、css3 トランジションを記述するときに次のように記述できます

-webkit-transition: background .7s ease-out;-moz-transition: background .7s ease-out;-o-transition: background .7s ease-out;transition: background .7s ease-out;

ちなみに、アニメーション効果は背景色に反映されるだけで、幅や高さは動的に変化しません。

同様に、CSS3 アニメーションの他の 2 つの効果、トランスフォーム (http://www.w3cplus.com/content/css3-transform) とアニメーション (http://www.w3cplus.com/content/css3-animation ) については、また、アニメーションを使用している場合でも、transition と同じであることがわかりました。css('width') を使用して取得される幅も変化します。興味のある学生はぜひ試してみてください。

そのため、css3 アニメーションを使用する場合は、アニメーションの影響にもっと注意を払う必要があります。