我正尝试使用flexbox和transitions创建一个手风琴,使用jQuery添加和删除一个折叠类。我遇到的问题是如果我将flex基础设置为扩展div的auto,则动画不起作用。示例见http://jsfiddle.net/vbLqg40h/。如果我将柔性基础从自动更改为500px,柔性容器的高度,动画工作(http://jsfiddle.net/vbLqg40h/2/)......我不知道为什么。使用flexbox的css手风琴
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');
}
});
});
过渡或动画仅对数字值起作用。 auto不是,并且没有任何东西可以继承或计算该值:( – 2014-09-05 18:05:13
基于@GCyrillus的评论和@DRD的回答,而不是javascript中的'.addClass'和'.removeClass'行我会做类似' .css('flex','0 0 25px')'和'.css('flex','1 1 450px')'我已经测试过了,并且正在运行,谢谢 – 2014-09-08 13:00:34