应用display：table后，转换不起作用

Question

我在<table>内有<div>，我希望我的<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

这里的问题是你在你想要转换的元素上添加了一个不可动画的属性。

这导致转换停止工作。

请参阅the spec - 该显示不是动画属性之一

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

坚持文章中提出的the code - 它运作正常。