web-dev-qa-db-fra.com

Appliquer les propriétés CSS à la fin de la transition

Comment puis-je appliquer les propriétés d'une déclaration à un élément après la fin des transitions CSS3? J'ai quelque chose comme:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

J'aimerais que les propriétés de remplissage et de marge de la déclaration: hover soient appliquées après la transition en 300 ms.

csscss-transitions
28
Sam

vous pouvez ajouter un délai comme celui-ci:

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

le premier commencera en vol stationnaire et durera 300 ms, le second commencera après 400 ms et durera à nouveau 300 ms.

DÉMO

Article sur CSS-Tricks

23
Duncan Beattie

Vous pouvez y parvenir en plaçant un autre élément à l'intérieur ou à l'extérieur .something et en appliquant des transitions de remplissage et de marge au nouvel élément, mais avec transition-delay valeur définie sur l'heure égale ou supérieure à l'heure de votre _ box-shadow transition.

Ainsi, par exemple:

<div class="immediate">
    <div class="later">
        I can haz transitions.
    </div>
</div>

Et CSS:

.immediate {
  background: #eeb;
  transition: box-shadow 300ms;
}

.immediate:hover {
  box-shadow: 0 0 3px black;
}

.later {
   margin: 0;
   padding: 10px 0;
   transition: all 400ms;
   transition-delay: 300ms;
}

.later:hover {
   margin: 10px 0;
   padding: 0;
}

Cela exécutera le box-shadow transition en 300 ms, puis margin et padding en 400 ms (vous pouvez définir ce temps de transition sur 0 si c'est l'effet que vous recherchez).

Vous pouvez l'essayer sur jsFiddle: http://jsfiddle.net/gTVVk/2/

EDIT: réponse de Duncan Beattie fera l'affaire, sauf si vous devez effectuer différentes transitions sur la même propriété. Sinon, il est inutile de compliquer les choses avec des div imbriqués.

4
konradstrack