web-dev-qa-db-fra.com

Puis-je appliquer une transition CSS à la propriété de débordement?

J'essaie de définir un transition-delay à la propriété overflow de body lorsqu'un div est cliqué en ajoutant une classe à body comme suit:

$("div").click(function(){
    $("body").addClass("no_overflow");
});
div{
  background:Lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

Cependant, cela ne semble pas fonctionner (il n'y a pas de retard). Suis-je en train de faire quelque chose de mal ici?

Je sais que cela peut être réalisé en utilisant la fonction setTimeout, mais je me demandais pourquoi cela ne pouvait pas être réalisé en utilisant des transitions css? Existe-t-il des propriétés de style spécifiques auxquelles les transitions CSS peuvent être appliquées?

csscss3css-transitions
23
Nikunj Madhogaria

Il existe de nombreuses propriétés qui ne peuvent pas être transférées. overflow en fait partie; le moteur de rendu n'a aucune idée de la transition entre "caché" et "affiché", car ce sont des options binaires, pas des intervalles. C'est la même raison pour laquelle vous ne pouvez pas effectuer de transition entre display: none; et display: block; (par exemple): il n'y a pas de phases intermédiaires à utiliser comme transitions.

Vous pouvez voir une liste de propriétés que vous pouvez animer ici sur Mozilla Developer Network.

45
TylerH

Vous pouvez simuler un retard avec animation:

$("div").click(function() {
  $("body").addClass("no_overflow");
});
div {
  background: Lime;
  height: 2000px;
}

.no_overflow {
  overflow: hidden;
  /* persist overflow value from animation */
  animation: 7s delay-overflow;
}

body {
  overflow: auto;
}

@keyframes delay-overflow {
  from { overflow: auto; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

Vous devrez appliquer une animation distincte à .body si vous voulez un délai sur removeClass, et aussi pour vous assurer que les deux animations ne se chevauchent pas ou qu'elles s'annuleront l'une l'autre.

17
Dmitry

le débordement n'est pas une propriété animable CSS. Vous pouvez voir la liste complète des propriétés CSS animables là .

8
Evgeny Samsonov

Il est logique que vous ne puissiez pas effectuer de transition entre les attributs binaires, par exemple overflow: hidden; et overflow: visible mais ça aurait été vraiment sympa si au lieu de "transition" alors ce serait comme (en pseudo code js:

setTimeout("applyOverflowVisible()", transitionTime);

Mais bien sûr, vous pouvez le faire vous-même en JavaScript, mais vous divisez le code entre les emplacements et il peut être difficile à comprendre par quelqu'un d'autre. Je suppose que l'utilisation de choses comme React aide mais même là, je voudrais éviter de mélanger CSS dans le js.

1
OZZIE