Puis-je appliquer une transition CSS à la propriété overflow?
j'essaie de mettre un transition-delayoverflowbody quand div est cliqué en ajoutant une classe à la body comme suit:
$("div").click(function(){
$("body").addClass("no_overflow");
});css lang-css prettyprint-override">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 délai). Est-ce que je fais quelque chose de mal ici?
je sais que cela peut être réalisé à l'aide de setTimeout fonction, mais se demandait pourquoi cela ne pouvait pas être réalisé en utilisant des transitions css? Il n'existe aucun style particulier propriétés auxquelles les transitions css peuvent être appliquées?
4 réponses
il y a beaucoup de propriétés qui ne peuvent pas être transitionnées. overflow est parmi eux; le moteur de rendu n'a aucune idée de comment faire la transition entre "caché" et "montré", parce que ce sont des options binaires, pas des intervalles. C'est la même raison pour laquelle vous ne pouvez pas faire la 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 Réseau.
Vous pouvez simuler un retard 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 séparée à .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'annulent mutuellement.
overflow n'est pas CSS animables de la propriété. Vous pouvez voir la liste complète des propriétés animables CSS il y a.
Il est logique que vous ne pouvez pas la transition entre les attributs binaires par exemple overflow: hidden; et overflow: visible mais il aurait été vraiment agréable si au lieu de "transitionner" alors ce serait comme (dans le pseudo code js:
setTimeout("applyOverflowVisible()", transitionTime);
Mais bien sûr, vous pouvez le faire vous-même en JavaScript, mais ensuite vous divisez le code entre les lieux, et il peut rendre 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.