動畫div定位重排

Question

我正在構建一個簡單的下推效果，它會影響兩個容器的位置。到目前爲止，我已經設法達到了一個近乎理想的效果，使用隱藏容器的固定位置，同時將其位置更改爲相對於打開狀態。

我想申請一個平穩過渡藍main DIV，正在向下推隱藏的div一類的.sub-header。我怎樣才能繞過容器不穩定的重新安排，並有沒有更好的方法做到這一點，而不是點擊時切換定位？ （例如，在這種情況下固定爲相對的）

當前，當我按照預期將定位從固定位置切換到相對位置時，會產生間隙，即.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。

編輯

對於非固定的高度，有解決方法，我的方法：

.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

請檢查一下。我們可以用保證金進行造型和留住位置相同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>