web-dev-qa-db-fra.com

-webkit-transition avec affichage

Est-il possible d'utiliser -webkit-transition avec display?

J'utilise CSS display pour masquer et afficher un deuxième niveau de navigation… mais seulement display: none et display: block sur :hover est un peu non sexy… une ease serait géniale (comme -webkit-transition: display 300ms ease-in;)

Je sais que c'est assez facile à faire avec jQuery, mais j'essaie actuellement de tout configurer avec CSS3 (je sais: tous les navigateurs ne le supportent pas, mais ce n'est pas pertinent pour ce projet sur lequel je travaille actuellement)

voici quelques code et structure: (le li.menu1 a un :hover avec section.nav-menu1 {display: block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>
csscss3webkitcss-transitions
19
albuvee

Vous devez utiliser la transition height ou width afin d'afficher et de masquer le menu de second niveau. La propriété Display n'est pas prise en charge par les transitions.

Il y a un article à ODC avec quelque chose de similaire à vos besoins. De plus, j'ai modifié un peu afin de ressembler davantage à un élément de menu. Fonctionne parfaitement dans Opera 10.7, sans transitions dans Firefox 3.6.12 et pas du tout dans Chrome 7.0.517.41.

J'espère que cela sera utile comme point de départ pour votre propre menu animé.

Mise à jour 1:Votre menu avec des transitions faciles . J'ai probablement un problème avec sa structure. Le problème est que les transitions ne fonctionnent pas avec auto, vous devez donc spécifier manuellement la hauteur finale.

Mise à jour 2: Utilisez l'opacité comme propriété de transition. Sur les éléments invisibles: visibilité: masquée et visibilité: visible sur visible. Cela évitera des liens cliquables invisibles. En outre, la transition visible-invisible ne fonctionne pas, je ne sais pas pourquoi. Je dois travailler plus longtemps.

Exemple .

13
Klaster_1

Donc, je ne suis pas sûr de voir toutes les pièces assemblées ici. Vous souhaitez animer l'opacité et la visibilité, la visibilité ayant un délai, l'opacité est effectuée avant qu'elle ne se déclenche;

opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;

à 

opacity: 1;
visibility: visible;

la visibilité attendra .5s, puis basculera sur masqué. Vous pouvez même désactiver la transition de visibilité d'un côté si vous souhaitez qu'elle disparaisse dans les deux sens. (Ainsi, lors de la transition en fondu, l'élément est immédiatement visible au lieu d'attendre .5s et de faire la transition.)

19
Bob Spryn

Vous devez utiliser une transition d'opacité, pas une transition d'affichage pour cela. Affichage: aucun ne supprime complètement un élément de la présentation - je pense que vous le voulez là, mais invisible.

0
Michael Mullany