web-dev-qa-db-fra.com

La transition de largeur CSS ne fonctionne pas du tout

Salut, j'essaie d'animer le width du span à l'intérieur du a de ce 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>

ici c'est le 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;
}

Comme vous pouvez le voir, j'essaie d'animer le width, mais, au lieu de grandir progressivement, le span ne s'affiche que sans transition. Pour vous permettre de comprendre l'effet que j'essaie d'obtenir, consultez le nav de ce site: http://KitKat.com/

J'ai fait moi-même un violon nav: http://jsfiddle.net/ZUhsn/ où le problème se pose.

J'espère que je vous ai donné toutes les informations pour essayer de résoudre mon problème. À votre santé.

htmlcsscss3css-transitions
21
steo

Essaye ça:

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/

Deux problèmes:

Tout d'abord, span est un élément en ligne par défaut, il n'a donc pas une largeur comme vous vous y attendez. En appliquant display:block;, nous le transformons en élément de niveau bloc avec largeur.

Deuxièmement, vous passiez à une valeur de largeur de 'auto'. Les transitions ne peuvent s'animer que sur des valeurs numériques, vous devrez donc donner à votre transition de fin une mesure avec des unités.

29
Mister Epic

Voici une reconstitution rapide des informations que vous avez fournies:

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

Et cela fonctionne parfaitement ...

0
Fred