html - Overlap of text on SCSS Transitions -

html - Overlap of text on SCSS Transitions -

click here jsfiddle

( works web-kit browsers )

i creating navigation links become wider , show text 1 time hover on them. works correctly except 1 issue; text not vanish quick plenty when moving mouse away button , pushed underneath button split sec (and looks ugly!).

i struggling find solution problem, have tried setting spans width , height 0 speed transition text vanishes quicker, neither seem work..

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

if add together #items li{ white-space: pre; }, contents of li won't wrap, , label become visible after + while growing, , disappear without glitch while shrinking.

see fiddle

html css sass css-transitions css-animations