嗨,我正在努力在这个导航的一个范围内的动画宽度
<nav class="navigator">
<ul>
<li><a href="#home">H<span>home</span></a></li>
<li><a title="What?" href="#what">W<span>what</span></a></li>
<li><a title="Porfolio" href="#works">P<span>works</span></a></li>
<li><a title="Who?" href="#who">W<span>who</span></a></li>
<li><a title="Where?" href="#where">W<span>where</span></a></li>
</ul>
</nav>
这里是CSS
header nav ul li a{
position: relative;
width: 40px;
display: block;
text-decoration: none;
font-size: 18px;
color: #000;
}
header nav ul li a:hover span{
width: auto;
overflow: visible;
text-align: right;
}
header nav ul li a span{
position: absolute;
width: 0;
right: 45px;
overflow: hidden;
transition:width 0.25s;
-webkit-transition:width .25s;
-moz-transition: width 0.25s;
font-size: 16px;
}
正如你可以看到,我正在努力制作宽度,但是,不是逐渐增长,而是跨越,而不是没有任何转变.
让你弄清楚我想要查看这个网站的导航的效果
：http://kitkat.com/
我做了一个自己的导航的小提琴：http://jsfiddle.net/ZUhsn/问题出来了.
希望我给你所有的信息,试图解决我的问题.
干杯.
解决方法
尝试这个：
header nav ul li a:hover{}
header nav ul li a:hover span{
width: 100%; /* YOU'LL NEED TO ADJUST THIS,IT CANNOT BE AUTO*/
overflow: visible;
text-align: right;
}
header nav ul li a span{
position: absolute;
width: 0;
right: 45px;
overflow: hidden;
transition:width 0.25s;
-webkit-transition:width .25s;
-moz-transition: width 0.25s;
font-size: 16px;
display:block; /*HERE IS MY OTHER CHANGE*/
}
两个问题：
首先,默认情况下,span是一个内联元素,因此它没有您期望的宽度.通过应用display：block,我们把它变成具有width的块级元素.
其次,您正在转换为宽度值“auto”.转换只能跨数值生成动画,所以您必须使用单位给您的结束转换.
