Flexbox，壓縮其他內聯元素以顯示100％懸停元素

下面，我有4個元素使用flexbox排隊。我得到它的工作，以便當我將鼠標懸停在其中一個元素上時，它會使該元素100%並壓縮其他元素。Flexbox，壓縮其他內聯元素以顯示100％懸停元素

我遇到的問題是轉換不能正常工作。

.container { 
 
    display: flex; 
 
} 
 

 
.container div { 
 
    flex-grow: 1; 
 
    height: 50px; 
 
    background-color: red; 
 
    border-left: 2px solid #777; 
 
    border-right: 2px solid #777; 
 
    transition: all .2s; 
 
} 
 

 
.container div:nth-of-type(1) { 
 
    background-color: blue; 
 
} 
 
.container div:nth-of-type(2) { 
 
    background-color: red; 
 
} 
 
.container div:nth-of-type(3) { 
 
    background-color: orange; 
 
} 
 
.container div:nth-of-type(4) { 
 
    background-color: yellow; 
 
} 
 

 
.container div:hover { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

有誰知道的方法，使這個Flexbox的例子過渡工作？

來源

2017-06-15 Hunter Turner

我意識到我只需要設置一個定義的寬度。

問題是它試圖轉換到100%寬度而不知道要轉換從。

將寬度設置爲0px或0%可修復過渡動畫。

注*如果您正在尋找IE 10 & 11支持，此解決方案可供您使用。以上flex-basis解決方案將無法在IE上運行。

.container { 
 
    display: flex; 
 
} 
 

 
.container div { 
 
    flex-grow: 1; 
 
    height: 50px; 
 
    background-color: red; 
 
    border-left: 2px solid #777; 
 
    border-right: 2px solid #777; 
 
    width: 0px; 
 
    transition: all .2s; 
 
} 
 

 
.container div:nth-of-type(1) { 
 
    background-color: blue; 
 
} 
 
.container div:nth-of-type(2) { 
 
    background-color: red; 
 
} 
 
.container div:nth-of-type(3) { 
 
    background-color: orange; 
 
} 
 
.container div:nth-of-type(4) { 
 
    background-color: yellow; 
 
} 
 

 
.container div:hover { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-06-15 23:10:42

動畫的flex-basis

這不會對IE的工作，雖然，對於一個需要使用width

.container { 
 
    display: flex; 
 
} 
 

 
.container div { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    overflow: hidden;   /* added so any content hides */ 
 
    height: 50px; 
 
    background-color: red; 
 
    border-left: 2px solid #777; 
 
    border-right: 2px solid #777; 
 
    transition: flex-basis .5s; 
 
} 
 

 
.container div:nth-of-type(1) { 
 
    background-color: blue; 
 
} 
 
.container div:nth-of-type(2) { 
 
    background-color: red; 
 
} 
 
.container div:nth-of-type(3) { 
 
    background-color: orange; 
 
} 
 
.container div:nth-of-type(4) { 
 
    background-color: yellow; 
 
} 
 

 
.container div:hover { 
 
    flex-basis: 100%; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-06-15 23:14:13 LGSon

也是一個很好的解決方案！謝謝！ –

**注意**該解決方案不適用於IE 11，因爲它使用「flex-basis」。 –

@HunterTurner嘆息！......用筆記更新了我的答案。我不介意你是否想因爲這個而接受你自己的回答。 – LGSon

Flexbox，壓縮其他內聯元素以顯示100％懸停元素

回答

相關問題