104 votes

CSS3 transition unidirectionnelle ?

En utilisant les transitions CSS3, il est possible d'avoir un effet 'doux vers le haut' et 'doux vers le bas' sur n'importe quelle propriété.

Puis-je le configurer pour n'avoir qu'un effet 'doux vers le bas'? J'aimerais que la solution soit en CSS uniquement, en évitant JavaScript si possible.

Flux logique :

  • L'utilisateur clique sur l'élément
  • La transition prend 0,5s pour changer la couleur de fond de blanc à noir
  • L'utilisateur relâche le bouton de la souris
  • La transition prend 0,5s pour changer la couleur de fond de noir à blanc

Ce que je veux :

  • L'utilisateur clique sur l'élément
  • La transition prend 0s pour changer
  • L'utilisateur relâche le bouton de la souris
  • La transition prend 0,5s pour changer...

Il n'y a pas de temps de 'transition-in', mais il y a un temps de 'transition-out'.

155voto

Matty K Points 1314

J'ai essayé ce qui suit dans l'éditeur CSS3 Tryit et cela a fonctionné dans Chrome (12.0.742.60 beta-m).

/* transition out, on mouseup, to white, 0.5s */
input
{
  background:white;
  -webkit-transition:background 0.5s;
  -moz-transition:background 0.5s;
  -ms-transition:background 0.5s;
  -o-transition:background 0.5s;
  transition:background 0.5s;
}

/* transition in, on click, to black, 0s */
input:active
{
  background:black;
  -webkit-transition:background 0s;
  -moz-transition:background 0s;
  -ms-transition:background 0s;
  -o-transition:background 0s;
  transition:background 0s;
}

8voto

Utiliser "transition:none" fonctionne aussi :

div{
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}

cliquez sur moi

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X