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

Question

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

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

从此出发：

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

到这里：

aside {
    display: none;
}

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

我怎样才能使导航消失和主要增长以适应屏幕？

Answer 1

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

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