gpt4 book ai didi

javascript - 我可以转换 flex box 的 flex-grow 来生成动画吗?

转载 作者:技术小花猫 更新时间:2023-10-29 10:10:15 24 4
gpt4 key购买 nike

是否可以在 flexbox 中转换元素?当您单击时,我希望所有元素都折叠起来,除了被单击的元素。单击的那个应该使用容器中的所有可用空间。

// only works once!
$(".item").click(function() {
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
}
.collapse {
flex-grow: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item" style="background: red">a</div>
<div class="item" style="background: green">b</div>
<div class="item" style="background: blue">c</div>
<div class="item" style="background: purple">d</div>
</div>

JSFiddle:http://jsfiddle.net/clankill3r/L8hktsgn/

最佳答案

flex-grow is animatable但前提是值为 <number> .但是,如果将值设置为 0,Google Chrome (v41) 似乎不会触发动画。 .

一个解决方法是使用一个非常小的值来代替——比如 0.0001 :

Updated example .

$(".item").click(function() {
$(".item").addClass("collapse");
$(this).removeClass("collapse");
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}

.container {
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}

.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
}

.collapse {
flex-grow: 0.001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item" style="background: red">a</div>
<div class="item" style="background: green">b</div>
<div class="item" style="background: blue">c</div>
<div class="item" style="background: purple">d</div>
</div>

关于javascript - 我可以转换 flex box 的 flex-grow 来生成动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29625037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com