我有一个菜单,当它打开时,它有 inline
显示,当它关闭时,span 有显示 none
只显示图标:see here .
这是我的代码:
<ButtonWrap>
<StyledButton style={{padding:0}}>
<IconWrap name='facebook' size='big'/>
<MenuText status = { open ? 'inline-flex' : 'none' } > facebook </MenuText>
</StyledButton>
</ButtonWrap>
这是我的 CSS:
export const buttonWrap = css` width: 100% ; height: 50px ; display: block; `;
export const buttonBase = css` background: transparent !important ; width: 100% !important; height: 100% !important; color: white !important; font-weight: bold !important; font-size: 0.875rem; font-family: Roboto; letter-spacing: 0.3px !important; margin-bottom:
1.4rem !important; &:hover{
color: white !important;
background-color:rgba(186,186,186,0.4) !important; } &:focus{
color: white !important;
background-color:#444bf8 !important; }`;
export const IconWrap = styled(Icon)` display: inline !important; padding: 0 !important; margin: 0 !important; height: '1em'; `;
我所有的代码都是here .
最佳答案
您可以将沙箱中的 style.css 更改为以下内容:
.ui.button {
white-space: nowrap;
overflow: hidden;
}
.ui.button > span {
opacity: 0;
}
.lnSeap .ui.button > span {
opacity: 1;
}
我评论中的元素组合可以让过渡顺利进行。设置动画时,更改 display
属性会显着改变布局,与调光开关相比,开关会显着改变灯光状态。
对于动画,不透明度
可以从 0 逐渐变为 1(以十进制递增)。 nowrap
和 hidden
属性在侧边栏收缩时保持 span 标签在原位。
关于css - 隐藏 span 标签不显示并显示内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59666539/