SCSS 过渡上的文本重叠答案

【问题标题】：Overlap of text on SCSS TransitionsSCSS 过渡上的文本重叠
【发布时间】：2014-12-03 06:36:12
【问题描述】：

（仅适用于 WEB-KIT 浏览器）

我正在创建一个带有链接的导航，当您将鼠标悬停在它们上方时，这些链接会变得更宽并显示文本。除了一个问题外，一切正常；将鼠标从按钮上移开时，文本不会很快消失，并且会在按钮下方被按下一秒钟（看起来很丑！）。

我正在努力寻找解决此问题的方法，我尝试将跨度宽度和高度设置为 0 并加快过渡速度，以便文本更快消失，但似乎都不起作用..

HTML：

<nav>
    <ul id="items">
        <li>><span class="extra"> View</span>

        </li>
        <li>+<span class="extra"> Add</span>

        </li>
    </ul>
    <div id="search">
        <input type="text" ng-model="typed" />
    </div>
</nav>

SCSS：

nav {
    width: 100%;
    padding: 6px 6px 4px 6px;
    position: fixed;
    top: 0;
    background-color: #dde;

    div {
        display: inline-block;
        float: right;
        padding: 4px 15px 4px 5px;
    }
}

ul#items {
    float: left;

    li {
        display: inline-block;
        padding: 5px 10px;
        background-color: #eef;
        color: #99a;
        width: 10px;
        height: 20px;
        overflow: hidden;
        -webkit-transition: width 0.2s linear, color 0.5s linear, background-color 0.5s linear;
    }
    li:hover {
        background-color: #ccd;
        color: #778;
        width: 45px;
        cursor: pointer;
    }
    li:hover span {
        opacity: 1;
        visibility: visible;
    }
    span {
        opacity: 0;
        font-size: 14px;
        padding-left: 8px 5px;
        -webkit-transition: opacity .25s linear, visibility .1s linear .3s;
        visibility: hidden;
    }
}

【问题讨论】：

实际上对我很有用Chrome Version 37.0.2062.120 (64-bit)。你用的是什么浏览器？
也使用 chrome，但是当您将鼠标悬停时，请尝试注意文本会在按钮上的 > 或 + 符号下方停留片刻。
版本 37.0.2062.124
有趣的互动。如果我想从左边移动到+，> 按钮会变大，基本上会推开我想点击的按钮。
您是否尝试在您的#items li 上设置white-space: nowrap;？

标签： html css sass css-transitions css-animations

【解决方案1】：

如果添加#items li{ white-space: pre; }，则li的内容不会换行，标签在+后会在增长时可见，在收缩时会消失而无故障。

见Fiddle

【讨论】：

谢谢！但我最终选择了 white-space: nowrap;这样我就可以从 div 中取出溢出：隐藏属性。 :) 空白：pre；一旦发现溢出，就会多排一行。 jsfiddle.net/Lukedturnbull/keb8ecLw