我如何动画显示：弹性项目上的无/块属性？

Question

有没有办法动画display: block/none？

单击div1和时div 4- 我想分别为 div 的 2 和 3 设置动画（完美的也是实现一些不错的过渡），同时将它们保持在 flex 内.container

到目前为止，我可以设置动画visibility和opacity（但在这种情况下，div '2 和 '3 虽然不可见，但仍然占用空间.container）或切换display: none到block（但随后我丢失transition了项目）。

我尝试定位内部 div 的absolute'ly，但随后所有的响应都陷入困境......

这是 CodePen：http ://codepen.io/adamTrz/pen/jWOJMj

Answer 1

最好使用 javascript 或 jQuery 来完成此操作，而不是切换到display:none，而是将元素的height（或/和width）动画设置为 0，然后将它们设置为display:none。

您可能对此页面感兴趣：http://www.impressivewebs.com/animate-display-block-none/评论中提出了很多类似的解决方案。

其中一条评论是一个纯 css 解决方案，我认为它接近您想要的：

CSS

div {
    overflow:hidden;
    background:#000;
    color:#fff;
    height:0;
    padding: 0 18px;
    width:100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.animated {
    height:auto;
    padding: 24px 18px;
}

小提琴： http: //jsfiddle.net/catharsis/n5XfG/17/