Fatal编程技术网
  • css/
  • Css 隐藏跨度标记，显示无，显示内联

Css 隐藏跨度标记，显示无，显示内联

css

Css 隐藏跨度标记，显示无，显示内联,css,inline,display,styled-components,Css,Inline,Display,Styled Components,我有一个菜单，当它打开时，会显示内联，当它关闭时，span会显示无，只显示图标： 这是我的密码： <ButtonWrap> <StyledButton style={{padding:0}}> <IconWrap name='facebook' size='big'/> <MenuText status = { open ? 'inline-flex' : 'none' } > facebook </Me

我有一个菜单，当它打开时，会显示
内联
，当它关闭时，span会显示
无
，只显示图标：

这是我的密码：

<ButtonWrap>
     <StyledButton style={{padding:0}}>
       <IconWrap name='facebook' size='big'/>
       <MenuText status = { open ? 'inline-flex' : 'none' } > facebook </MenuText> 
    </StyledButton>
 </ButtonWrap>
我的所有代码都是。

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

.ui.button {
  white-space: nowrap;
  overflow: hidden;
}
.ui.button > span {
  opacity: 0;
}
.lnSeap .ui.button > span {
  opacity: 1;
}
我的评论中的一系列项目使过渡得以顺利进行。设置动画时，更改
显示
属性会大幅更改布局，与调光开关相比，开关会大幅更改灯光状态

对于动画，
不透明度可以从0逐渐更改为1（以十进制增量）。
nowrap
和
hidden
属性在侧边栏收缩时将span标记保持在原位。
您可以选择的一个设计选项是将闭合CSS设置为固定宽度，并设置
溢出：隐藏
隐藏额外文本，而不是设置
显示：无。或者，您可以设置
opacity:0和
不透明度：1打开时。你能给我举个例子吗？要使过渡淡入淡出，我必须输入宽度和不透明度？我意识到根本不需要宽度，因为收缩不依赖于跨度标记。但是我添加了不透明度来逐步淘汰它，并且添加了nowrap+溢出来避免标记移动。

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