Могу ли я применить переход CSS к свойству переполнения?

Я пытаюсь установить transition-delay в overflow свойство body при нажатии div путем добавления класса к body следующим образом:

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

Ответы

Ответ 1

Существует много свойств, которые нельзя перенести. overflow среди них; движок рендеринга не знает, как перейти между "скрытыми" и "показанными", потому что это двоичные варианты, а не интервалы. Это по той же причине, почему вы не можете переходить между display: none; и display: block; (например): нет промежуточных фаз для использования в качестве переходов.

Вы можете увидеть список свойств, которые вы можете анимировать здесь в Mozilla Developer Network.

Ответ 2

переполнение не является атрибутом CSS. Вы можете увидеть полный список анимированных свойств CSS там.

Ответ 3

Вы можете моделировать задержку с помощью 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>

Ответ 4

Имеет смысл, что вы не можете переходить между двоичными атрибутами, например overflow: hidden; и overflow: visible, но было бы очень приятно, если бы вместо "перехода" это было бы (в js псевдокоде:

setTimeout("applyOverflowVisible()", transitionTime);

Но, конечно, вы можете сделать это сами в JavaScript, но тогда вы разделяете код между местами, и это может затруднить понимание кем-то другим. Я думаю, использование таких вещей, как React помогает, но даже там я хотел бы избежать смешивания css в js.