자식 부모 효과의 CSS 전환 위로

Question

단추 내부에 애니메이션을 적용하려고하지만 어떤 이유로 작동하지 않습니다. 버튼의 폭은 왼쪽

HTML 0으로 축소해야

<div class="siteBtnShare"> 
    <div class="share-text-wrapper"> 
     <span class="share-text">SHARE</span> 
    </div> 
</div> 

SCSS

.siteBtnShare { 
position: relative; 
display: inline-block; 
font-family: 'Novecentosanswide-Medium'; 
width: 40px; 
transition: width 1s; 
overflow:hidden; 

.share-text-wrapper{ 
    width: 40px; 
    display: inline-block; 
} 

&:hover .share-text-wrapper{ 
    width: 0; 
} 

} 

편집 : - 버튼이 0으로 축소해야하지만 아무것도하지 않는 내부. 그것은 계속 표시

Answer 1

폭은 텍스트가 컨테이너 외부 흐름 때문에 그냥 볼 수 없습니다, 축소 않습니다 SCSS에

.siteBtnShare { 
 
position: relative; 
 
display: inline-block; 
 
font-family: 'Novecentosanswide-Medium'; 
 
width: 40px; 
 
transition: width 1s; 
 
overflow:hidden; 
 
} 
 

 
.share-text-wrapper{ 
 
    width: 40px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 

 
.siteBtnShare:hover .share-text-wrapper{ 
 
    width: 0; 
 
}

<div class="siteBtnShare"> 
 
    <div class="share-text-wrapper"> 
 
     <span class="share-text">SHARE</span> 
 
    </div> 
 
</div>

근무 코드 :

.siteBtnShare { 
position: relative; 
display: inline-block; 
font-family: 'Novecentosanswide-Medium'; 
width: 40px; 
transition: width 1s; 
overflow:hidden; 

.share-text-wrapper{ 
    width: 40px; 
    display: inline-block; 
    overflow: hidden; 
} 

&:hover .share-text-wrapper{ 
    width: 0; 
} 

}

Answer 2

시도해보십시오. 귀하의 취향대로 FontAwesome 아이콘을 사용하십시오.

SCSS

.siteBtnShare { 
    background: #eee; 
    display: inline-block; 
    padding: 10px; 
    height: 20px; 
    width: auto; 
    color: #333; 
    &:hover { 
     .share-text-wrapper { 
      .share-text { 
       width: 100%; 
      } 
     } 
    } 
} 
.label { 
    display: inline-block; 
    width: 1em; 
    color: #888; 
} 
.share-text-wrapper { 
    display: inline-block; 
    white-space: nowrap; 
    margin-left: -1em; 
    padding-left: 1em; 
    .share-text { 
     display: inline-block; 
     width: 0%; 
     overflow: hidden; 
     -webkit-transition: width 1s ease-in-out; 
     -moz-transition: width 1s ease-in-out; 
     -o-transition: width 1s ease-in-out; 
     transition: width 1s ease-in-out; 
    } 
} 

HTML

<div class="siteBtnShare"> 
    <span class="label"><i class="fa fa-share-alt" aria-hidden="true"></i></span> 
    <div class="share-text-wrapper"> 
     <div class="share-text"> 
      Share It Out 
     </div> 
    </div> 
</div> 

JSFiddle : https://jsfiddle.net/Jabideau/3bo4zxgc/