css - 我可以将 CSS 过渡应用于 overflow 属性吗？

Question

当 div 时，我正在尝试将 transition-delay 设置为 body 的 overflow 属性通过向 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>

但是，这似乎不起作用(没有延迟)。我在这里做错了什么吗？

我知道这可以通过使用 setTimeout 函数来实现，但想知道为什么不能使用 css transitions 来实现？是否有任何特定的样式属性可以应用 css 转换？

Answer 1

有许多属性无法转换。 overflow 就在其中；渲染引擎不知道如何在“隐藏”和“显示”之间转换，因为它们是二元选项，而不是间隔。这就是为什么你不能在 display: none; 和 display: block; 之间转换的原因(例如):没有中间阶段可以用作过渡。

您可以看到可以设置动画的属性列表 here 在 Mozilla 开发者网络上。