0

ページ上のいくつかの要素をアニメーション化しようとしています。アニメーション化する必要のあるプロパティの1つは、bottomアニメーション化せずに要素を再配置できる必要があることです。そのため、別のクラスを追加しました。.anim

.slideshow_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff
}
.slideshow_footer.anim {
    -webkit-transition:bottom 0.3s ease-out;
    -moz-transition:bottom 0.3s ease-out;
    -o-transition:bottom 0.3s ease-out;
    -ms-transition:bottom 0.3s ease-out;
    transition:bottom 0.3s ease-out;
}

私のJavascriptでは、次のことを行います。

var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setCss(footer, 'bottom', ); // animate the footer sliding in

私はjQueryなどを使用していないことに注意してください。これは、社内のjavascriptフレームワークです。

問題を解決する回避策を見つけましたが、それは非常に醜いです：

var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setTimeout(function() {
    setCss(footer, 'bottom', ); // animate the footer sliding in
}, 0); // even no timeout works...

誰かが私に何が起こっているのか、そしてこれをどのように解決するのが最善かを説明できますか？おそらくaddClass関数とsetCss関数を変更しますか？

4

1 に答える 1

0

私自身の質問に答えるには：

timeOut を使用するのが正しいアプローチです。

JavaScript 全体が完了するまで、ブラウザーは表示される HTML を更新しません。その場合、「下」の後に「右」を設定すると、要素が 2 回移動します。ブラウザーの観点からは、要素は即座に "anim" とボトム 0 の両方を取得します。タイムアウトが 0 の setTimeout は、ブラウザーにできるだけ早くコードを実行するように指示しますが、JavaScript の同じラウンドでは実行しません。

この回避策は、コードを実行する「非同期」の方法として実際に多くの人に採用されています。

于 2013-01-08T12:43:20.417 に答える