可以将CSS转换应用于overflow属性吗?

前端之家收集整理的这篇文章主要介绍了可以将CSS转换应用于overflow属性吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当通过向主体添加一个类来单击div时,我正在设置一个过渡延迟到body的overflow属性,如下所示:
$("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转换来实现?是否有可以应用css转换的特定样式属性

解决方法

有许多属性无法转换。溢出是其中之一;渲染引擎不知道如何在“隐藏”和“显示”之间进行转换,因为这些是二进制选项,而不是间隔。这与您无法在display之间转换的原因相同:none;并显示:block; (例如):没有中间阶段用作转换。

您可以在Mozilla开发人员网络上查看可以为here创建动画的属性列表。

猜你在找的CSS相关文章