CSS宽度过渡根本不起作用

Posted 2023-03-06

【中文标题】CSS宽度过渡根本不起作用

【英文标题】：CSS width transition not working at all

【发布时间】：2013-10-01 01:50:33

【问题描述】：

您好，我正在尝试在此 nav 的 a 内为 span 的 width 设置动画

<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/ 问题出现的地方。

希望我为您提供了所有信息以尝试解决我的问题。 干杯。

【问题讨论】：

如果您的宽度不是问题，请将跨度宽度从自动更改为固定大小。

是的，我看到它在固定宽度下可以工作，但是如何使它与auto 宽度一起工作？

@steo，为什么需要auto 宽度？ 100% 会给你想要的效果吗？

【参考方案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' 的宽度值。过渡只能跨数值进行动画处理，因此您必须为结束过渡提供带有单位的度量。

【参考方案2】：

只需在hover 上将width : 100% 更改为您的span：

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

查看JSFiddle

【参考方案3】：

以下是您提供的信息的快速重现：

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

而且它的工作非常完美......