CSS宽度转换根本不起作用

Question

你好我想动画width的span里面a的这nav

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

正如你所看到的那样,我正试图为它制作动画width,但是,不是逐渐增长,而是span只是在没有任何变化的情况下出现transition.为了让你弄清楚我想要查看的nav网站的效果:http://kitkat.com/

我做了一个自己的小提琴nav:http://jsfiddle.net/ZUhsn/ 问题出来了.

希望我给你提供所有信息,试图解决我的问题.干杯.

Answer 1

试试这个:

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*/
}

http://jsfiddle.net/ZUhsn/4/

两个问题:

首先,默认情况下,span是一个内联元素,因此它没有您期望的宽度.通过应用display:block;,我们将其转换为具有宽度的块级元素.

其次,您正在转换为宽度值'auto'.过渡只能在数值上进行动画处理,因此您必须使用单位给出结束过渡.

Answer 2

只需更改width : 100%为您的spanon hover：

header nav ul li a:hover span{
    width : 100%;
    overflow: visible;
    text-align: right;
}

检查这个JSFiddle