使用 flexbox 的 css 手风琴

Question

我正在尝试使用 flexbox 和转换创建手风琴，使用 jQuery 添加和删除折叠类。我遇到的问题是，如果我将扩展 div 的 flex-basis 设置为 auto，则动画不起作用。有关示例，请参阅http://jsfiddle.net/vbLqg40h/。如果我将 flex-basis 从 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 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%;