我用 flex 创建了一个 div,一次只有一个处于事件状态。它似乎在 1200 像素的 body 中运行良好,但由于过渡时内部隐藏/显示(类内容),它开始闪烁小于 1200 像素。
如果我不更改 content class display none from flex,它运行良好;但我需要切换显示 flex 。
参见 codepen和下面的片段:
$('.top div').click(function(){
$('.top div').removeClass('active')
$(this).addClass('active')
})
body {
background-color: #fff;
}
.top {
display: flex;
}
.top .item {
display: flex;
border: 1px solid black;
padding: 10px;
flex-grow: 1;
flex-basis: 0;
height: 180px;
transition: all .5s;
}
.top .item .flexo-box {
display: flex;
flex-basis: 0;
background: #f8f8f8;
box-sizing: border-box;
position: relative;
}
.top .item .flexo-box img {
width: 100%;
max-width: 180px;
}
.top .item .view-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 2;
background: #eeeeee;
}
.top > div:not(:last-child) {
margin-right: 20px;
}
.top .active {
background-color: white;
flex-grow: 4;
flex-basis: 0;
opacity: 1;
}
.content {
display: none;
box-sizing: border-box;
height: 100%;
}
.content .active-tab {
height: 50px;
}
.content .active-tab p, .content .archive-tab p {
font-size: 12px;
margin: 0;
}
.content .active-tab p.active, .content .archive-tab p.active {
background: blue;
}
.content .active-tab p.active + span, .content .archive-tab p.active + span {
background: blue;
}
.content .active-tab span, .content .archive-tab span {
font-size: 10px;
}
.item.active .flexo-box:hover .view-btn {
opacity: 1;
}
.item.active .content {
display: flex;
flex-grow: 2;
}
.item > div {
flex-grow: 1;
flex-basis: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300">
<span class="view-btn">
<a href="/jobs/12526/proof_documents/19776" class="btn btn-secondary proof__order__link ">
View File
</a>
</span>
</div>
<div class='content'>
<div class="active-tab">
<p>dfgsfgsfg<p>
<p class="active">012620_11254_LEN_78441.pdf</p>
<span>fsdfgfs0<span>
<div class="archive-tab">
<h3>Archived file</h3>
<p>012620_87896_LEN_11548.pdf</p>
<span> archived dfgfd4<span>
<p>012620_16975_LEN_98761.pdf<p>
<span>archived sdfgsfg</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
</div>
<div class='content'>
hello
</div>
</div>
<div class='item active'>
<div class='flexo-box'></div>
<div class='content'>
hello
</div>
</div>
<div class="item">
<div class='flexo-box'></div>
<div class='content'>
hello
</div>
</div>
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
</div>
<div class='content'>
<div class="active-tab">
<p>current file<p>
<p class="active">012620_11254_LEN_78441.pdf</p>
<span>wertrwet 190314 1250<span>
<div class="archive-tab">
<h3>Archived file</h3>
<p>012620_87896_LEN_11548.pdf</p>
<span> wert ertrwet4<span>
<p>012620_16975_LEN_98761.pdf<p>
<span> 190309 1ertret152</span>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
display
属性无法设置动画 - 所以从 content
中删除 display: none
并添加这些:
.item>.content {
min-width: 0;
flex: 0;
overflow: hidden;
}
现在 content
将为零宽度,flexo-box
将占据所有空间。注意 min-width: 0
的使用 - 这允许 flex item 收缩超出其内容(默认 min-width
flex item 是 auto
)。
现在您也可以将 min-width: 0
添加到 item
以获得更流畅的动画 - 请参见下面的演示:
$('.top div').click(function() {
$('.top div').removeClass('active')
$(this).addClass('active')
})
body {
background-color: #fff;
}
.top {
display: flex;
}
.top .item {
display: flex;
border: 1px solid black;
padding: 10px;
flex-grow: 1;
flex-basis: 0;
height: 180px;
transition: all .5s;
min-width: 0; /* added */
}
.top .item .flexo-box {
display: flex;
flex-basis: 0;
background: #f8f8f8;
box-sizing: border-box;
position: relative;
}
.top .item .flexo-box img {
width: 100%;
max-width: 180px;
}
.top .item .view-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 2;
background: #eeeeee;
}
.top>div:not(:last-child) {
margin-right: 20px;
}
.top .active {
background-color: white;
flex-grow: 4;
flex-basis: 0;
opacity: 1;
}
.content {
/*display: none;*/
box-sizing: border-box;
height: 100%;
}
.content .active-tab {
height: 50px;
}
.content .active-tab p,
.content .archive-tab p {
font-size: 12px;
margin: 0;
}
.content .active-tab p.active,
.content .archive-tab p.active {
background: blue;
}
.content .active-tab p.active+span,
.content .archive-tab p.active+span {
background: blue;
}
.content .active-tab span,
.content .archive-tab span {
font-size: 10px;
}
.item.active .flexo-box:hover .view-btn {
opacity: 1;
}
.item.active .content {
display: flex;
flex-grow: 2;
}
.item>div {
flex-grow: 1;
flex-basis: 0;
}
.item>.content { /* added */
min-width: 0; /* allow it to go to zero */
flex: 0; /* reduce the width */
overflow: hidden; /* hide oveflow */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300">
<span class="view-btn">
<a href="/jobs/12526/proof_documents/19776" class="btn btn-secondary proof__order__link ">
View File
</a>
</span>
</div>
<div class='content'>
<div class="active-tab">
<p>dfgsfgsfg</p>
<p class="active">012620_11254_LEN_78441.pdf</p>
<span>fsdfgfs0</span>
<div class="archive-tab">
<h3>Archived file</h3>
<p>012620_87896_LEN_11548.pdf</p>
<span> archived dfgfd4</span>
<p>012620_16975_LEN_98761.pdf</p>
<span>archived sdfgsfg</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
</div>
<div class='content'>
hello
</div>
</div>
<div class='item active'>
<div class='flexo-box'></div>
<div class='content'>
hello
</div>
</div>
<div class="item">
<div class='flexo-box'></div>
<div class='content'>
hello
</div>
</div>
<div class="item">
<div class='flexo-box'>
<img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
</div>
<div class='content'>
<div class="active-tab">
<p>current file</p>
<p class="active">012620_11254_LEN_78441.pdf</p>
<span>wertrwet 190314 1250</span>
<div class="archive-tab">
<h3>Archived file</h3>
<p>012620_87896_LEN_11548.pdf</p>
<span> wert ertrwet4</span>
<p>012620_16975_LEN_98761.pdf</p>
<span> 190309 1ertret152</span>
</div>
</div>
</div>
</div>
</div>
关于html - 是我的 flex-grow 动画没有正常工作有什么问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55338850/