¿Puedo aplicar una transición de CSS a la propiedad de desbordamiento?

Estoy tratando de establecer un transition-delay a la propiedad de overflow del body cuando se hace clic en un div al agregar una clase al body siguiente manera:

 $("div").click(function(){ $("body").addClass("no_overflow"); }); 
 div{ background:lime; height:2000px; } .no_overflow{ overflow:hidden; } body{ overflow:auto; transition: overflow 0 2s; } 
  
I'm div

Sin embargo, esto no parece funcionar (no hay demora). ¿Estoy haciendo algo mal aquí?

Sé que esto se puede lograr utilizando la función setTimeout , pero me preguntaba por qué no se puede lograr esto mediante el uso de transiciones CSS. ¿Existen propiedades de estilo específicas a las que se puedan aplicar transiciones CSS?

Hay muchas propiedades que no pueden ser transicionadas. overflow está entre ellos; el motor de renderizado no tiene idea de cómo hacer la transición entre “oculto” y “mostrado”, porque esas son opciones binarias, no intervalos. Esta es la misma razón por la que no puede hacer la transición entre la display: none; y display: block; (por ejemplo): no hay fases intermedias para usar como transiciones.

Puede ver una lista de propiedades que puede animar aquí en Mozilla Developer Network.

Puedes simular un retraso con la 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; } } 
  
I'm div

el desbordamiento no es propiedad animable CSS. Puede ver la lista completa de propiedades de CSS animables allí .

Tiene sentido que no pueda hacer la transición entre atributos binarios, por ejemplo overflow: hidden; y overflow: visible pero hubiera sido realmente agradable si en lugar de “transitioning” hubiera sido como (en js pseudo code:

 setTimeout("applyOverflowVisible()", transitionTime); 

Pero, por supuesto, puede hacerlo usted mismo en JavaScript, pero luego está dividiendo el código entre lugares y puede dificultar la comprensión por parte de otra persona. Supongo que usar cosas como React ayuda, pero incluso allí me gustaría evitar mezclar css en el js.