Question

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

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

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

我尝试定位内部div block，然后所有响应都会下地狱......

这是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/

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

1 个答案: