我如何动画显示：none / block 属性在 flex 项目上？

Question

有什么方法可以让 display: block/none 动起来吗？

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

到目前为止，我可以为 visibility 和 opacity 制作动画（但在这种情况下 divs '2 和 '3 虽然不可见，但仍然采用 space在 .container 内）或将 display: none 切换为 block（但随后我丢失了 transition 项）。

我尝试将 div 的 absolute' 定位在内部，但随后所有的响应都变得糟糕...

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

Answer 1

最好用 javascript 或 jQuery 来做到这一点，而不是切换到 display:none，动画 height (or/and 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;
}

Fiddle: http://jsfiddle.net/catharsis/n5XfG/17/

我如何动画显示：none / block 属性在 flex 项目上？

How can i animate display: none / block property on flex items?

html

css

jquery

animation

flexbox

我如何动画显示：none / block 属性 在 flex 项目上？

How can i animate display: none / block property on flex items?

html

css

jquery

animation

flexbox

我如何动画显示：none / block 属性在 flex 项目上？