Posso applicare una transizione CSS alla proprietà di overflow?

Sto cercando di impostare un transition-delay di transition-delay alla proprietà di overflow del body quando viene fatto clic su un div aggiungendo una class al body come segue:

 $("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

Tuttavia, questo non sembra funzionare (non c’è ritardo). Sto facendo qualcosa di sbagliato qui?

So che questo può essere ottenuto utilizzando la funzione setTimeout , ma ci si chiedeva perché non si potesse ottenere ciò usando le transizioni css? Ci sono proprietà di stile specifiche a cui possono essere applicate le transizioni di CSS?

Ci sono molte proprietà che non possono essere trasferite. overflow è tra loro; il motore di rendering non ha idea di come passare tra “nascosto” e “mostrato”, perché quelle sono opzioni binarie, non intervalli. Questa è la stessa ragione per cui non è ansible passare da una display: none; e display: block; (per esempio): non ci sono fasi intermedie da usare come transizioni.

Puoi vedere un elenco di proprietà che puoi animare qui su Mozilla Developer Network.

Puoi simulare un ritardo con l’ 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

l’overflow non è una proprietà animabile CSS. Qui puoi vedere l’elenco completo delle proprietà CSS animabili.

È logico che non sia ansible la transizione tra attributi binari, ad esempio overflow: hidden; e overflow: visible ma sarebbe stato davvero bello se invece di “passare” allora sarebbe come (in pseudo codice js:

 setTimeout("applyOverflowVisible()", transitionTime); 

Ma ovviamente puoi farlo tu stesso in JavaScript, ma poi stai dividendo il codice tra i posti e può renderlo difficile da capire da qualcun altro. Immagino che usare cose come React aiuti ma anche lì vorrei evitare di mescolare css nel js.