web-dev-qa-db-fra.com

Différents délais de transition CSS pour le survol et la sortie de la souris?

Est-il possible d'utiliser des transitions CSS3 avec un retard différent de commutation entre "états"? Par exemple, j'essaie de faire un élément immédiatement plus haut lors du survol puis lors du "mouseout" pour attendre une seconde avant de revenir à la hauteur initiale de l'élément.

Page de démonstration: jsfiddle.net/RTj9K (survoler la boîte noire dans le coin supérieur droit)

CSS: #bar { transition:.4s ease-out 0, 1s; }

Je pensais que les timings à la fin étaient liés au retard, mais cela ne semble pas fonctionner comme je l'avais imaginé.

csscss3transitionscss-transitions
45
Marcel

Si vous souhaitez des délais de transition CSS différents sur hover et mouseout, vous devez les définir à l'aide des sélecteurs appropriés. Dans l'exemple ci-dessous, lorsqu'un élément est survolé, le retard initial au survol est de 0 mais sur mouseout la transition est retardée de 1s.

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

Vous pouvez trouver le CSS complet dans la démo mise à jour de ma question ci-dessous. J'ai utilisé la propriété shorthand transition, l'ordre des valeurs est:

transition:<property> <duration> <timing-function> <delay>;

Démonstration de réponse: http://jsbin.com/lecuna/edit?html,css,output

105
Marcel

Voici un exemple JSFiddle simplifié . Fondamentalement, vous avez besoin du transition-delay propriété:

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}
13
Dan Manastireanu
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

Juste pour dire que cela ne fonctionnera pas si vous n'entrez pas le symbole 's' (secondes), donc:

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */
3
Nebojša Ložnjaković