html - CSS过渡宽度不适用于flex
问题描述
布局:
<div style={{ flex:1 }}>
<div className="sideBarContainer">
<div className="sideBar">
<div className="sideBarExtra"> <--- conditional
</div>
<div className="content"></div>
</div>
CSS:
.sideBarContainer {
display: flex;
flex-direction: row;
}
.sideBar {
height: 100vh;
min-width: 64px;
z-index: 99;
}
.content {
flex: 1;
transition: width .3s linear;
}
sideBarExtra 使用 react-tranisition-group CSSTransitionGroup 组件有条件地呈现。
sideBarExtra 渲染时会从左向右平滑滑入,移除时会从右向左滑出。
添加 sideBarExtra 时,内容 div 不会平滑过渡,它会跳转到它的位置。
预期行为:内容平滑滑动到新宽度。
在控制台开发工具中,我可以看到内容宽度正在改变,但没有发生过渡动画。
解决方案
.sideBarContainer {
display: flex;
flex-direction: row;
width: 100%;
}
.sideBar {
background: red;
height: 100vh;
min-width: 64px;
z-index: 99;
}
.content {
width: 10%;
height: 100vh;
background: yellow;
transition: width .3s linear;
}
.content:hover {
width: 80%;
}
<div style="display:flex;">
<div class="sideBarContainer">
<div class="sideBar">
<div class="sideBarExtra"> </div>
</div>
<div class="content">Hover me</div>
</div>
你可以改变瞬间
.content {
flex: 1;
transition: width: .3s linear;
}
至
.content {
flex: 1;
transition: width .3s linear;
}
转换不需要任何:冒号这里上面的代码
答案 2
您还可以在示例中为 flex 属性设置动画:
.sideBarContainer {
display: flex;
flex-direction: row;
width: 100%;
}
.sideBar {
background: red;
height: 100vh;
min-width: 64px;
z-index: 99;
flex: 2;
transition: flex .3s linear;
}
.content {
flex: 1;
height: 100vh;
background: yellow;
transition: flex .3s linear;
}
.sideBarContainer:hover .sideBar {
flex: 1;
}
.sideBarContainer:hover .content {
flex: 2 0 auto;
}
<div style="display:flex;">
<div class="sideBarContainer">
<div class="sideBar">
<div class="sideBarExtra"> </div>
</div>
<div class="content">Hover me</div>
</div>
推荐阅读
- c# - 将 xml webresponse 转换为 dataTable
- dataframe - 如何将一列添加到 pyspark 数据框中,该数据框包含基于另一列上的分组的平均值
- ffmpeg - Azure Blob 存储中的 HLS 事件流
- c - 尝试通过#define传递scanf读取的最大字符数
- javascript - 我在 javascript 中的 if 语句不起作用
- javascript - Javascript游戏,撞墙时的碰撞检测
- angular - 是否可以将 cdkDrag 放入 mat-select 中?
- mysql - MySQL会根据多列索引顺序对where条件进行重新排序吗?
- android - Pre-Nougat 设备上的 PixelCopy
- git - BFG - 有没有办法替换特定路径上文件的文本?