使用flexbox的css手風琴

Question

我正嘗試使用flexbox和transitions創建一個手風琴，使用jQuery添加和刪除一個摺疊類。我遇到的問題是如果我將flex基礎設置爲擴展div的auto，則動畫不起作用。示例見http://jsfiddle.net/vbLqg40h/。如果我將柔性基礎從自動更改爲500px，柔性容器的高度，動畫工作（http://jsfiddle.net/vbLqg40h/2/）......我不知道爲什麼。

HTML

<div id="wrapper"> 
    <div id="box1" class="expand"></div> 
    <div id="box2" class="expand collapse"></div> 
    <div id="box3" class="expand collapse"></div> 
</div> 

CSS

#wrapper { 
    height: 500px; 
    display: flex; 
    flex-direction: column; 
} 

.expand { 
    flex: 1 1 auto; 
    transition: all 2s; 
} 

.collapse { 
    flex: 0 1 25px; 
} 

#box1 { 
    background-color: yellow; 
} 

#box2 { 
    background-color: green; 
} 

#box3 { 
    background-color: blue; 
} 

的JavaScript

$('.expand').click(function() { 
    var expandId = $(this).attr('id'); 
    $('.expand').each(function() { 
    var thisId = $(this).attr('id'); 
    if (expandId != thisId) { 
    $('#' + thisId).addClass('collapse'); 
    } else { 
    $('#' + thisId).removeClass('collapse'); 
    } 
}); 
}); 

Answer 1

，使過渡工作，你需要明確設置flex-basis。以下是點擊激活手風琴的CSS解決方案：http://jsfiddle.net/zx854854/。如果您想堅持點擊狀態，則可以使用收音機input和label組合。

HTML：

<div id="wrapper"> 
    <div tabindex = "1"></div> 
    <div tabindex = "2"></div> 
    <div tabindex = "3"></div> 
</div> 

CSS：

#wrapper { 
    height: 300px; 
    display: flex; 
    flex-direction: column; 
} 

#wrapper > * { 
    flex: 0 0 25px; 
    outline: 0; 
    transition: flex-basis 0.3s linear; 
} 

#wrapper > div:first-of-type { 
    background-color: blue; 
    order: 3; 
} 

#wrapper > div:first-of-type:not(:focus) + div:not(:focus) + div:not(:focus) { 
    flex-basis: 250px; 
} 

#wrapper > div:nth-of-type(2) { 
    background-color: green; 
    order: 2; 
} 

#wrapper > div:nth-of-type(3) { 
    background-color: yellow; 
    order: 1; 
} 

#wrapper > div[tabindex]:focus { 
    flex: 1 1 250px; 
} 

Answer 2

我實現了這個使用下面的代碼：

HTML

<ul class="actions-list"> 
     <li class="action-item facebook"> 
      Facebook 
     </li> 
     <li class="action-item google"> 
      GooglePlus 
     </li> 
     <li class="action-item linkedin"> 
      LinkedIn 
     </li> 
     <li class="action-item picasa"> 
      Picasa 
     </li> 
     <li class="action-item twitter"> 
      Twitter 
     </li> 
     <li class="action-item wikipedia"> 
      Wikipedia 
     </li> </ul> 

CSS

/* Flex box define */ 
.actions-list { 
    display: -webkit-box; 
    display: -webkit-inline-flex; 
    display: -moz-inline-flex; 
    display: -ms-inline-flexbox; 
    display: inline-flex; 
} 

.actions-list .action-item { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    -moz-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 

    -webkit-transition: all 300ms ease; 
    -moz-transition: all 300ms ease; 
    -o-transition: all 300ms ease; 
    transition: all 300ms ease; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    overflow: hidden; 
} 

/* Design: widths, colors, borders, etc... */ 
.actions-list { 
    margin: 0; 
    padding: 0; 
} 
.actions-list .action-item { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: lighter; 
    cursor: pointer; 
    background-color: #66bbcc; 
    border-left: 1px solid rgba(0, 0, 0, 0.2); 
    color: #000000; 
    padding-left: 52px; 
    background-repeat: no-repeat; 
    background-position: left 10px center; 
    background-size: 32px; 
    line-height: 52px; 
    height: 52px; 
    max-width: 50px; 
} 
.actions-list .action-item:hover { 
    max-width: 150px; 
    background-color: #ff9966; 
    padding-right: 10px; 
} 
.actions-list .action-item:first-child { 
    border: none; 
} 

.facebook { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/facebook.png); 
} 
.google { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/google.png); 
} 
.linkedin { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/linkedin.png); 
} 
.picasa { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/picasa.png); 
} 
.twitter { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/twitter.png); 
} 
.wikipedia { 
    background-image: url(http://www.webdeveasy.com/code/assets/images/wikipedia.png); 
} 

JS Fiddle link of the accordian

參考

Click here for reference of the project

Answer 3

我想您遇到這裏所描述的錯誤：https://bugzilla.mozilla.org/show_bug.cgi?id=731886

例子：https://bug731886.bugzilla.mozilla.org/attachment.cgi?id=601838

將它的工作你把它設置爲100％，而不是？：

flex: 1 1 100%;