作業中のページのフッター (またはその一部) は折りたたむことができます。また、この要素の崩壊と拡大をアニメーション化します。フッターは固定されていません (固定したくない) が、フッターが展開されているときにビューをページの下部に固定することをお勧めします。これをいくつかの方法で処理しようとしましたが、すべての場合で動作は同じです。フッターを折りたたむと、アニメーション中にドキュメントの高さが小さくなり、フッターは画面の下部に固定されたままになります。フッターを展開しても、ビューポートの位置は変わらず、ドキュメントの高さが増し、フッターのアニメーションが折り目の下で発生します。
このアニメーションは、javascript と CSS3 の両方を使用して処理しました。動作は同じです。また、フッターを絶対に配置し、同時にフッターの上のコンテンツの高さをアニメーション化することも試みました...同じ動作です。
最後に、他のアニメーションが行われている間に window.scrollTo をアニメーション化するための JavaScript ハックをいくつか試しました。これが機能しないことは混乱を招きます。これがそのハックの基本的な例です。
collapse: function(container,collapsed) {
var maxHeight = 250,
steps = 50,
params = this.animParams(maxHeight,steps,collapsed);
for (i = 0; i < params.length; i++) {
this.animateCollapse(container,params,i);
}
},
animateCollapse: function(container,params,i) {
setTimeout(function() {
container.css('height',params[i]);
window.scrollTo(0,100000);
},10);
},
animParams: function(maxHeight, steps, collapsed) {
var arr = [];
for (i = 0; i <= steps; i++) {
var multiplier = (steps - i) / steps;
arr.push(maxHeight * multiplier);
}
if (!collapsed) {
arr = arr.reverse();
}
return arr;
},
上記の例では、ドキュメントよりも高い値 (100000) を使用しています。これは、アニメーションが同時に発生しているにもかかわらず、そのループ中に $(document).height() によって返される値が変化しないためです。
結局のところ、私の目標は非常に単純です。フッターの高さがアニメーション化され、ドキュメントの高さが増加しているときに、ビューポートを画面の下部に維持します。何か案は?
ありがとう