css accordion using flexbox

Question

Я пытаюсь создать аккордеон, используя flexbox и переходы, добавляя и удаляя класс collapse с jQuery. Проблема, с которой я столкнулась, заключается в том, что я устанавливаю flex-basis как auto для расширенных div, анимация не работает. См. Пример 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 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%;