父div上的CSS轉換導致絕對子div跳轉？

Question

我正在製作一個圓形的漢堡包菜單按鈕，該菜單按鈕在懸停時生成動畫，從中心向上生長，以三個小節divs爲中心，位於父div圓圈內。

父div具有固定位置以啓用「增長」效果。這三個漢堡包菜單行是絕對定位的div。

徘徊時，一切都通過過渡動畫，例外的三個孩子的div跳從右下角懸停得很順利，並頂部上鼠標左鍵出來。我試過調整邊距，寬度/高度和定位，但我被卡住了。我錯過了什麼？

.circle-nav { 
 
    display: block; 
 
    position: fixed; 
 
    width: 44px; 
 
    height: 44px; 
 
    top: 35px; 
 
    left: 35px; 
 
    color: rgba(255, 255, 255, 0.8); 
 
    background-color: rgb(136, 35, 24); 
 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.05); 
 
    -webkit-border-radius: 22px; 
 
    -moz-border-radius: 22px; 
 
    border-radius: 22px; 
 
    transition: width 300ms ease, height 300ms ease, transform 300ms ease, background 300ms ease, border-radius 300ms ease, box-shadow 300ms ease, top 300ms ease, left 300ms ease; 
 
} 
 
.circle-nav:hover { 
 
    width: 66px; 
 
    height: 66px; 
 
    top: 25px; 
 
    left: 25px; 
 
    background-color: rgb(187, 53, 39); 
 
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 8px 6px rgba(0, 0, 0, 0.05); 
 
    -webkit-border-radius: 33px; 
 
    -moz-border-radius: 33px; 
 
    border-radius: 33px; 
 
} 
 
.top-bar, 
 
.mid-bar, 
 
.bot-bar { 
 
    width: 22px; 
 
    height: 2px; 
 
    position: absolute; 
 
    left: 11px; 
 
    background-color: #fff; 
 
} 
 
.top-bar { 
 
    top: 14px; 
 
} 
 
.mid-bar { 
 
    top: 21px; 
 
} 
 
.bot-bar { 
 
    top: 28px; 
 
} 
 
.circle-nav:hover .top-bar { 
 
    top: 24px; 
 
} 
 
.circle-nav:hover .mid-bar { 
 
    top: 31px; 
 
} 
 
.circle-nav:hover .bot-bar { 
 
    top: 38px; 
 
} 
 
.circle-nav:hover .top-bar, 
 
.circle-nav:hover .mid-bar, 
 
.circle-nav:hover .bot-bar { 
 
    left: 22px; 
 
}

<div class="circle-nav"> 
 
    <div class="top-bar"></div> 
 
    <div class="mid-bar"></div> 
 
    <div class="bot-bar"></div> 
 
</div>

Answer 1

的問題是，因爲要轉換容器大小的變化，但不應用到杆的位置變化相當於過渡。因此，根據懸停時容器的原始大小（即，當top和left值較大時它會移動到右下角），並跳到它們在放大的容器中的原始位置徘徊（意思是，它移動到左上方，因爲top和left比較小）。由於集裝箱從各個方向拉伸，所以最終會在過渡結束時移動到中間位置。

如果你添加一個等效的300ms transition到酒吧然後一切都很好。

請注意，欄的左邊位置仍然有一個小小的跳躍，但可以通過調整懸停時容器的left位置來解決（如我在片段中所做的那樣）。

.circle-nav { 
 
    display: block; 
 
    position: fixed; 
 
    width: 44px; 
 
    height: 44px; 
 
    top: 35px; 
 
    left: 35px; 
 
    color: rgba(255, 255, 255, 0.8); 
 
    background-color: rgb(136, 35, 24); 
 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.05); 
 
    -webkit-border-radius: 22px; 
 
    -moz-border-radius: 22px; 
 
    border-radius: 22px; 
 
    transition: width 300ms ease, height 300ms ease, transform 300ms ease, background 300ms ease, border-radius 300ms ease, box-shadow 300ms ease, top 300ms ease, left 300ms ease; 
 
} 
 
.circle-nav:hover { 
 
    width: 66px; 
 
    height: 66px; 
 
    top: 25px; 
 
    left: 24px; /* changed this to prevent the small adjustment during hover */ 
 
    background-color: rgb(187, 53, 39); 
 
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 8px 6px rgba(0, 0, 0, 0.05); 
 
    -webkit-border-radius: 33px; 
 
    -moz-border-radius: 33px; 
 
    border-radius: 33px; 
 
} 
 
.top-bar, 
 
.mid-bar, 
 
.bot-bar { 
 
    width: 22px; 
 
    height: 2px; 
 
    position: absolute; 
 
    left: 11px; 
 
    background-color: #fff; 
 
    transition: all 300ms ease; /* added this to prevent the jump */ 
 
} 
 
.top-bar { 
 
    top: 14px; 
 
} 
 
.mid-bar { 
 
    top: 21px; 
 
} 
 
.bot-bar { 
 
    top: 28px; 
 
} 
 
.circle-nav:hover .top-bar { 
 
    top: 24px; 
 
} 
 
.circle-nav:hover .mid-bar { 
 
    top: 31px; 
 
} 
 
.circle-nav:hover .bot-bar { 
 
    top: 38px; 
 
} 
 
.circle-nav:hover .top-bar, 
 
.circle-nav:hover .mid-bar, 
 
.circle-nav:hover .bot-bar { 
 
    left: 22px; 
 
}

<div class="circle-nav"> 
 
    <div class="top-bar"></div> 
 
    <div class="mid-bar"></div> 
 
    <div class="bot-bar"></div> 
 
</div>