css手风琴使用flexbox

Question

我正在尝试使用flexbox和转换创建一个手风琴，并使用jQuery添加和删除一个折叠类。我遇到的问题是，如果我为扩展的div设置flex基准为auto，动画就不起作用。看见http://jsfiddle.net/vbLqg40h/例如。如果我将flex基础从auto更改为500px，即flex容器的高度，动画就会工作（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链接

参考

点击此处获取项目的参考

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%;