我可以应用CSS transition到overflow属性吗？ [英] Can I apply a CSS transition to the overflow property?

问题描述

我试图为的溢出属性设置 transition-delay 通过向正文添加类如下所示，当点击 div / p>



  $（div）click（function（）{$（body）。addClass（no_overflow）;}）;  

  div {background： 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>我是div< / div>  

但是，这似乎没有效果我在这里做错了什么？

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

解决方案

有许多属性无法转换。 overflow 是其中之一;渲染引擎不知道如何在隐藏和显示之间转换，因为那些是二进制选项，而不是间隔。这也是为什么你不能在 display：none; 和 display：block; ）

您可以看到一个可以动画的属性列表 此处 。

I'm trying to set a transition-delay to the overflow property of body when a div is clicked by adding a class to the body as follows:

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

However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?

I know this can be achieved by using setTimeout function, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?

解决方案

There are many properties that can't be transitioned. overflow is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none; and display: block; (for example): there are no in-between phases to use as transitions.

You can see a list of properties you can animate here on Mozilla Developer Network.

这篇关于我可以应用CSS transition到overflow属性吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！