2017-12-06 20 views
-2

Ich versuche, innerhalb Schaltfläche zu animieren, aber aus irgendeinem Grund wird es nicht funktionieren. Breite der Schaltfläche sollte auf 0 nach linksCSS-Übergang Hover auf übergeordneten Effekt auf Kind

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 schrumpfen: - Im Inneren der Taste auf 0 schrumpfen sollte, aber es tut nichts. Es bleibt sichtbar

+0

In welcher Weise es nicht funktioniert? –

+0

Wie möchten Sie es per Mausklick animieren? – Jonny

+0

beim Schweben. Und ich es funktioniert nicht auf eine Weise, dass es nichts macht. Der innere Text ist immer noch sichtbar – OunknownO

Antwort

0

Die Breite scheut, die Sie gerade sehen es nicht, weil der Text außerhalb des Behälters fließt:

.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>

Arbeits Code in 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; 
} 

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

}

0

Versuchen Sie dies, mito ut das FontAwesome-Symbol oder mit, wie Sie möchten.

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/