如何动画显示：弹性项目上的无/块属性？ [复制]

Posted 2023-03-05

【中文标题】如何动画显示：弹性项目上的无/块属性？ [复制]

【英文标题】：How can i animate display: none / block property on flex items? [duplicate]

【发布时间】：2016-03-24 01:15:44

【问题描述】：

有什么方法可以为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

【参考方案1】：

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

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

其中一个 cmets 是一个纯 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/

【讨论】：

谢谢，完全忘记了可以为宽度和高度设置动画:)

优秀答案