0

作業中のページのフッター (またはその一部) は折りたたむことができます。また、この要素の崩壊と拡大をアニメーション化します。フッターは固定されていません (固定したくない) が、フッターが展開されているときにビューをページの下部に固定することをお勧めします。これをいくつかの方法で処理しようとしましたが、すべての場合で動作は同じです。フッターを折りたたむと、アニメーション中にドキュメントの高さが小さくなり、フッターは画面の下部に固定されたままになります。フッターを展開しても、ビューポートの位置は変わらず、ドキュメントの高さが増し、フッターのアニメーションが折り目の下で発生します。

このアニメーションは、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() によって返される値が変化しないためです。

結局のところ、私の目標は非常に単純です。フッターの高さがアニメーション化され、ドキュメントの高さが増加しているときに、ビューポートを画面の下部に維持します。何か案は?

ありがとう

4

0 に答える 0