web-dev-qa-db-ja.com

CSSの幅の移行がまったく機能しない

こんにちは、この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/ で問題を解決するフィドルを作成しました。

私の問題を解決するために、すべての情報を提供したいと思います。乾杯。

htmlcsscss3css-transitions
21
steo

これを試して：

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/

2つの問題：

まず、spanはデフォルトではインライン要素であるため、期待どおりの幅はありません。 display:block;を適用することにより、幅のあるブロックレベルの要素に変換します。

第二に、'auto'の幅の値に移行していました。トランジションは数値全体でのみアニメーション化できるため、終了トランジションに単位を使用した測定を行う必要があります。

29
Mister Epic

単にwidth : 100%をspanのhoverに：

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

これを確認してください JSFiddle

4
Nikhil Patel

以下は、提供した情報の簡単な再作成です。

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

そしてその完璧な働き...

0
Fred