使用 display none 隐藏 span 标签并使用 inline 显示

Question

我有一个菜单，打开时显示 inline，关闭时显示 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。

Answer 1

您可以将沙盒中的 style.css 更改为以下内容：

.ui.button {
  white-space: nowrap;
  overflow: hidden;
}
.ui.button > span {
  opacity: 0;
}
.lnSeap .ui.button > span {
  opacity: 1;
}

我评论中的项目组合可以让过渡顺利进行。设置动画时，更改 display 属性会显着改变布局，与调光开关相比，开关会显着改变灯光状态。

对于动画，opacity 可以从 0 逐渐变为 1（以十进制递增）。 nowrap 和 hidden 属性在侧边栏收缩时将 span 标签保持在原位。

使用 display none 隐藏 span 标签并使用 inline 显示

Hiding span tag with display none and showing with inline

css

inline

display

styled-components