css - 隐藏 span 标签不显示并显示内联

标签 css inline display styled-components

我有一个菜单,当它打开时,它有 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(以十进制递增)。 nowraphidden 属性在侧边栏收缩时保持 span 标签在原位。

关于css - 隐藏 span 标签不显示并显示内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59666539/

相关文章:

css - XHTML换行空格问题

HTML - 通过不显示隐藏和取消隐藏 div

html - 删除 Blogger 自定义模板中的侧边栏线

html - 如何在 ionic 工具栏的中心设置和对齐 ionic 选择

c++ - 内联和通过宏包含源之间的区别

java - 无论字符大小如何生成制表符缩进数组

javascript - jQuery fullPage : All images loading at same time

css - 如何水平对齐社交图标

jquery - CSS 过渡 : control other div

css - 问题放置复选框和内联文本