我正在尝试通过将类添加到来将a 设置为单击时transition-delay的overflow属性,如下所示:body``div``body
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>
但是,这似乎不起作用(没有延迟)。我在这里做错什么吗?
我知道可以通过使用 setTimeout 函数来实现,但是想知道为什么不能使用CSS过渡来实现吗?是否有可以应用CSS过渡的特定样式属性?
有许多属性无法转换。overflow在他们中间;渲染引擎不知道如何在“隐藏”和“显示”之间进行转换,因为这些是二进制选项,而不是间隔。这就是为什么您不能在display: none;和之间display: block;进行转换的原因(例如):没有中间阶段可以用作转换。
display: none;
display: block;
你可以看到属性的列表,你可以动画 这里Mozilla开发者网络上。