Question

我试图在按钮内部制作动画，但出于某种原因它不会起作用。按钮的宽度应缩小到左侧的

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

}

编辑： - 按钮内部应缩小到0，但它没有做任何事情。它仍然可见

Answer 1

宽度确实缩小了，你只是看不到它，因为文字在容器之外流动：

＆＃13;

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

＆＃13;

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

＆＃13;

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

}

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/

CSS过渡悬停在对子项的父效果上

2 个答案: