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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章