html - 使用媒体查询为 Flexbox 设置动画？

Question

我正在尝试使用 flexbox 创建一个网站，该网站的主要功能之一是隐藏导航栏，在这种情况下是JSFiddle中的左侧面板，当视口在 480px 和 1023px 之间时。目前它可以工作，但动画非常跳跃，不清楚发生了什么。

现在我正在尝试在 css3 中使用过渡，但这似乎根本没有动画任何东西......

从这里开始：

aside {
    -webkit-transition: all 1s ease;
    width: 270px;
}

对此：

aside {
    display: none;
}

两种状态之间不会发生转换。

如何动画导航消失和主要增长以适应屏幕？

Answer 1

从今天开始，您无法在 CSS 中为 Display 设置动画。

您可能可以在某些可以动画的属性上链接动画。例如一些弹性盒的宽度和高度。