应用显示后转换不起作用:表

Question

我在<div>中有一个<table>，我希望我的<div>能相应地缩放到我的<table>。只有当我单击某个按钮时，才会显示此<div>。出现时，应该有一个滑动过渡。但是，在我将display: table;添加到CSS之后，转换就消失了。

input.toggle ~ div 
{ 
    transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); 
}
input.toggle:checked ~ div 
{ 
    display: table;
}

我试图应用的效果在这个链接中：http://demosthenes.info/blog/506/HTML5-Window-Toggle-Events-In-Pure-CSS3

Answer 1

这里的问题是，您在试图转换的元素上添加了一个不可设置动画的属性。

这导致过渡工作停止。

请参阅规范-显示不是可设置动画的属性之一

因此，您必须从input.toggle:checked ~ div类中删除display: table;规则。

坚持使用文章中提出的代码——它工作得很好。