Html CSS 宽度转换根本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19005456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS width transition not working at all
提问by steo
Hi I'm trying to animate the widthof the spaninside the aof this nav
你好我想动画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>
here it is the CSS
这是 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;
}
As you can see I'm trying to animate the width, but, instead of growing gradually the spanis only showing up without any transition.
To let you figure out the effect that I'm trying to get check out the navof this site
:http://kitkat.com/
正如你可以看到我试图动画width，但是，而不是在增长逐渐span只显示出来，没有任何transition。为了让您了解我正在尝试查看nav此站点的效果：http: //kitkat.com/
I made a fiddle of my own nav:http://jsfiddle.net/ZUhsn/where the problem comes out.
我自己做了一个小提琴nav：http: //jsfiddle.net/ZUhsn/问题出现的地方。
Hope I gave you all the information to try to solve my issue. Cheers.
希望我给你所有的信息来尝试解决我的问题。干杯。
回答by Mister Epic
Try this:
尝试这个：
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*/
}
Two issues:
两个问题：
Firstly, span is an inline element by default, so it doesn't have a width like you would expect. By applying display:block;, we turn it into a block-level element with width.
首先，默认情况下 span 是内联元素，因此它没有您期望的宽度。通过应用display:block;，我们把它变成了一个具有宽度的块级元素。
Secondly, you were transitioning to a width value of 'auto'. Transitions can only animate across numerical values, so you'll have to give your ending transition a measurement with units.
其次，您正在过渡到宽度值'auto'. 过渡只能跨数值进行动画处理，因此您必须为结束过渡提供带单位的度量。
回答by Nikhil Patel
回答by Fred
Here's a quick recreation of the information you provided:
以下是您提供的信息的快速重现：
<style>
.navigator
{
position: absolute;
left: 200px;
border:1px solid black;
}
.navigator span
{
position: absolute;
-moz-transition: 0.5s;
opacity: 0;
right: 0px;
z-index: -1;
}
.navigator a
{
text-decoration: none;
color: black;
}
.navigator a:hover span
{
right: 100%;
opacity: 1;
-moz-transition: 0.5s;
}
</style>
<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="Portfolio" 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>
And its working quite perfectly...
它的工作非常完美......
