Скрытие тега span с отображением none и показом с помощью - PullRequest
Новая
       44

Скрытие тега span с отображением none и показом с помощью

0 голосов
/ 09 января 2020

У меня есть меню, и когда оно открыто, оно имеет дисплей inline, а когда оно закрыто, диапазон имеет дисплей none для отображения только значка: см. Здесь .

Вот мой код: 

<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'; `;

Весь мой код здесь .

1 Ответ

0 голосов
/ 09 января 2020

Вы можете изменить свой стиль. 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 на месте при уменьшении боковой панели.

...