子への親エフェクトのCSSトランジション

Question

ボタン内でアニメートしようとしていますが、何らかの理由でそれが機能しません。ボタンの内側に0に縮小する必要がありますが、それは何もしない - ：ボタンの幅が左

HTML

<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; 
} 

} 

EDITに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/