アニメーションの配置再配置のアニメーション

Question

2つのコンテナの位置に影響する単純なプッシュダウンエフェクトを作成しています。これまでは、隠れたコンテナの固定位置を使用して、望みの近い効果を達成しながら、開かれた状態の相対的な位置にその位置を変更しました。

Iは、.sub-headerのクラスで隠しDIVによって押し下げられている青main DIVに滑らかな移行を適用します。どのようにしてコンテナの不規則な並べ替えをバイパスすることができますか？クリックで位置を切り替えるのではなく、これを行うもっとエレガントな方法がありますか？ （この場合、固定値など）

現在のところ、私は予想通り固定から相対に切り替えると、ギャップが生成されています（.sub-headerの高さです）。

注：現在のdivの高さは固定値であり、私はこれは.sub-header高さの動的変更を処理できるようにする必要があります。

注：これは、など.slideToggleここ

のようにjQueryのネストされたエフェクトを使用していない、カスタムクラスを追加することによって達成されなければならないが、Fiddleです。

とフィドル共有するために必要なシンプルなjQueryの機能：

$('.trigger').click(function() { 
    $('.sub-header').toggleClass('opened'); 
}).stop(); 

Answer 1

position: relative;を作成し、

$('.trigger').click(function() { 
 
    $('.sub-header').toggleClass('opened'); 
 
}).stop();

body { 
 
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    * { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    } 
 
} 
 

 
header, 
 
.sub-header, 
 
main { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    flex-direction: column; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
header { 
 
    height: 100px; 
 
    background: tomato; 
 
    z-index: 1000; 
 
    position: relative; 
 
} 
 

 
.sub-header { 
 
    height: 150px; 
 
    background: gainsboro;/* 
 
    transform: translateY(-200%);*/ 
 
    margin-top:-150px; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
.opened {/* 
 
    transform: translateY(0%);*/ 
 
    margin-top:0; 
 
} 
 

 
main { 
 
    height: 250px; 
 
    background: deepskyblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>Header content <a href="#" class="trigger">TRIGGER</a></header> 
 
<div class="sub-header">Sub Header content</div> 
 
<main>Main Content</main>

アップデートをアニメーション化するためのマージントップを実行します -

を取得するとして

-100%あなたはそれが浮く作ると100%

$('.trigger').click(function() { 
 
    $('.sub-header').toggleClass('opened'); 
 
}).stop();

body { 
 
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    * { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    } 
 
} 
 

 
header, 
 
.sub-header, 
 
main { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    flex-direction: column; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
header { 
 
    width:100%; 
 
    height: 100px; 
 
    background: tomato; 
 
    z-index: 1000; 
 
    position: relative; 
 
} 
 

 
.sub-header { 
 
    height: 150px; 
 
    width:100%; 
 
    background: gainsboro;/* 
 
    transform: translateY(-200%);*/ 
 
    margin-top:-100%; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 10; 
 
    float:left; 
 
} 
 

 
.opened {/* 
 
    transform: translateY(0%);*/ 
 
    margin-top:0; 
 
} 
 

 
main { 
 
    width:100%; 
 
    height: 250px; 
 
    background: deepskyblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>Header content <a href="#" class="trigger">TRIGGER</a></header> 
 
<div class="sub-header">Sub Header content</div> 
 
<main>Main Content</main>

Answer 2

私はあなたの質問を誤解している場合、私を修正するために、すべての幅を設定しているが、私は非常に簡単な方法は、あなたがしているものにそこだと思います達成しようとしている。 CSSコードで対応するクラスを変更してみてください：

.sub-header { 

    background: gainsboro; 
    height: 0; 
    -webkit-transition: height .3s linear; 
    transition: height .3s linear; 
} 

.opened { 
    height: 150px; 
} 

ここではfiddleです。私のアプローチはすべての拠点を網羅していません。隠れたコンテナにまだテキストが表示されていることがわかりますが、これはあなたのjsやCSSでいくつかの追加の回避策が必要ですが、私はあなたの.sub-container固定height。

非固定の高さのためにEDIT

は、私のアプローチでは、回避策があります：

.sub-header { 

    background: gainsboro; 
    height: auto; 
    max-height: 0px; 
    -webkit-transition: max-height .3s linear; 
    transition: max-height .3s linear; 
} 

.opened { 
    max-height: 400px; 
} 

それはまだ調整する必要があります - あなたが設定したときに低い値に.openedのmax-height、 transitionが遅くなります。それは完璧ではない、それは.sub-containerの高さが比較的類似しているケースをカバーすると思った。

Answer 3

これを確認してください。私たちは、私はこのケースでは動作しませんこれは、-100％の値でそれを設定できるようにする必要がありスタイリングのためのマージンを使用して、位置、ここで同じrelative

$('.trigger').click(function() { 
 
    $('.sub-header').toggleClass('opened'); 
 
}).stop();

body { 
 
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    * { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    } 
 
} 
 

 
header, 
 
.sub-header, 
 
main { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    flex-direction: column; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
header { 
 
    height: 100px; 
 
    background: tomato; 
 
    z-index: 1000; 
 
    position: relative; 
 
} 
 

 
.sub-header { 
 
    height: 150px; 
 
    background: gainsboro; 
 
    transform: translateY(-200%); 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 10; 
 
    /*play with position and margin*/ 
 
    position: relative; 
 
    margin-bottom:-200px; 
 
} 
 

 
.opened { 
 
    transform: translateY(0%); 
 
    margin-bottom:0; 
 
} 
 

 
main { 
 
    height: 250px; 
 
    background: deepskyblue;  
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<header>Header content <a href="#" class="trigger">TRIGGER</a></header> 
 
<div class="sub-header"> 
 
    <p>Sub Header content</p> 
 
</div> 
 
<main>Main Content</main>