为元素设置动画，使其从 display:none 变为 CSS

Question

我有一个菜单系统，当单击“菜单”按钮时，一些简单的 javascript 允许移动菜单显示为下拉菜单。

我想要它，以便此菜单转换/动画化，但显示：none 属性似乎无法使用 CSS 动画进行动画处理。我真的不想只使用不透明度：0，因为移动菜单将在文档流中，而在桌面设备上我不希望出现这种情况。

有什么CSS解决办法吗？当我使用 Greensock 动画库时，它允许您设置动画或更改“显示”属性。我似乎无法让它与 CSS 动画一起使用？

我创建了一个简单的笔，我只使用了一个 div 动画（为了简单起见，我没有包含任何 JS 点击事件等）。

如您所见，我在 id#bluebox 的 CSS 和 @keyframes 动画上注释掉了显示：none。如果您取消注释这些，您会看到产生的问题。

https://codepen.io/emilychews/pen/xPWddZ

CSS

#bluebox {
  margin-left: 0px;
  margin-top: 0px;
  width: 100px;
  height: 100px;
  background: blue;
  animation: appear 1s ease-in forwards;
  opacity: 0;
/*   display: none; */
}

@keyframes appear {
  0% {/*display: none;*/ opacity: 0}
  1% {display: block; opacity: 0.1;}
  100% {opacity: 1;}
}

HTML

<div id="bluebox"></div>

Answer 1

在这种情况下，由于您正在尝试为元素设置动画，我想说您可能应该使用宽度和高度来代替您的优势。

像这样的东西可以代替显示 none。 (Codepen)

#bluebox {
  width: 0px;
  height: 0px;
}

@keyframes appear {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}

宽度或高度也可以替换为您的末端 width/height 以允许更自然的动画，具体取决于您的目标。如果您愿意，我可以更新 Codepen 以包含我的意思的示例。

如果这就是您的目标，请告诉我！

编辑：修复了 Codepen link

Answer 2

我通过向元素添加一个 transform: scaleY(0) 来解决这个问题，然后在动画的前 1% 中使用不透明度为 0 的元素对其进行动画处理，因此您看不到元素 'scale up' 可以这么说。我使用比例而不是宽度和高度，因为宽度和高度属性在实现 60fps 平滑度方面不能很好地设置动画。

CSS

#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
transform: scaleY(0);
}   

@keyframes appear {
  0% {opacity: 0;}
  1% {opacity: 0; transform: scaleY(1)}
  100% {opacity: 1; transform: scaleY(1)}
}

为元素设置动画，使其从 display:none 变为 CSS

Animating an Element so it changes from display:none with CSS

css

animation

transitions

display