首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否可以将CSS过渡应用于overflow属性?

是否可以将CSS过渡应用于overflow属性?
EN

Stack Overflow用户
提问于 2015-01-12 23:00:25
回答 6查看 34.2K关注 0票数 31

当单击transition-delay时,我尝试通过向body添加一个类来设置bodyoverflow属性的div,如下所示:

代码语言:javascript
复制
$("div").click(function(){
    $("body").addClass("no_overflow");
});
代码语言:javascript
复制
div{
  background:lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

然而,这似乎不起作用(没有延迟)。我做错什么了吗?

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

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2015-01-12 23:08:46

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

你可以在Mozilla Developer Network上看到一个属性列表,你可以对进行动画处理。

票数 56
EN

Stack Overflow用户

发布于 2016-12-19 19:25:54

您可以使用animation模拟延迟

代码语言:javascript
复制
$("div").click(function() {
  $("body").addClass("no_overflow");
});
代码语言:javascript
复制
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; }
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

如果你想在removeClass上延迟,你必须对.body应用一个单独的动画,还要注意两个动画不要重叠,否则它们会相互抵消。

票数 33
EN

Stack Overflow用户

发布于 2015-01-12 23:09:28

CSS overflow不是动画属性。你可以看到动画CSS属性there的完整列表。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27904886

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档