flex-basis：0与溢出隐藏添加空间笨拙

我试图通过过渡flex和flex-基础属性暂时隐藏一些内容的视图。flex-basis：0与溢出隐藏添加空间笨拙

以下链接是我遇到的问题的一个过度简化的演示。见第一个项目是如何继承了额外的空间... http://codepen.io/mr_webster/pen/BWNWKo

<div class="box"> 
<div class="item first">item</div> 
<div class="item second"> 
<p>item</p> 
</div> 
<div class="item third"> 
<p>item</p> 
</div> 
<div class="item forth">item</div> 
</div> 

.box { 
display: flex; 
flex-wrap: wrap; 
} 

.item { 
flex: 1 0 50%; 
background: tomato; 
overflow: hidden; 
} 

.first { flex: 0 0 100%; } 
.second { flex: 0 0 0; } 
.forth { flex: 0 0 100%; }

这里的第二个环节是沿着什么，我试图达到的线条，但仍展现了额外的空间问题被添加。 http://codepen.io/mr_webster/pen/oZXBMd

任何有关为什么发生这种情况或如何解决它的建议将不胜感激。 :)

来源

2017-02-27 Andrew Webster

在您的第二个链接中，单击该按钮后添加的空间是由第二个分区<div class="item second">引起的，因为从技术上讲它仍然是正常流程的一部分。解决这个问题的方法是在点击按钮后“删除”第二个div。对您的代码进行以下编辑：

.box { 
    display: flex; 
    flex-wrap: wrap; 
    background: tomato; /*add background color to your .box. This is needed for animation reasons*/ 
} 

.box.toggle { 
    .second { 
    flex: 0 1 0%; 
    height: 0; /* This hides the second div and removes the space you're referring to.*/ 
    } 
}

希望这适用于您。

来源

2017-02-27 08:31:14 Mers

至于最终的状态，这肯定有效，但这种方法在过渡过程中产生的突然间隙是我试图解决的问题。我已经在转换max-height方面取得了一些成功，但它在某些渲染步骤中似乎起到了一些奇怪的闪烁效果。 –

这是我想出的一种可能的解决方案，虽然它感觉很不舒服，我希望有更优雅的东西。 http://codepen.io/mr_webster/pen/mWJzRR

我正在转换最大高度并转换一个容器元素。

<div class="item second"> 
    <div class="second-container"> 
    <p>item</p> 
    <p>item</p> 
    </div> 
</div> 

.second-container { 
    transition-property: max-height, transform; 
    transition-timing-function: ease-in-out; 
    transition-duration: 2s; 
    transform: translateX(0); 
    max-height: 1000px; 
    width: 200px; 
    overflow: hidden; 
} 

second-container { 
    max-height: 0; 
    transform: translateX(-100%); 
}

来源

2017-02-27 20:05:21

flex-basis：0与溢出隐藏添加空间笨拙

回答

相关问题