动画元素,使其从显示更改为:无CSS

时间:2017-11-21 16:56:16

标签: css css3 animation display transitions

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

我想拥有它,所以这个菜单转换/动画,但display:none属性似乎不能用CSS动画制作动画。我真的不想只使用不透明度:0因为移动菜单将在文档流中,而在桌面设备上我不希望这样。

这有什么CSS解决方案吗?当我使用Greensock动画库时,它允许您设置动画或更改“显示”属性。我似乎无法使用CSS动画制作它?

我创建了一个简单的笔,我刚刚使用了一个动画的div(为了保持简单,我还没有包含任何JS点击事件等)。

正如你所看到的,我已经注释掉了显示:在id#bluebox的CSS和@keyframes动画上都没有。如果您取消注释,则可以看到创建的问题。

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>

2 个答案:

答案 0 :(得分:0)

在这种情况下,由于你试图为元素设置动画,我会说你应该使用宽度和高度代替你。

像这样的东西可以作为替代展示无。 (Codepen

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

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

宽度或高度也可以替换为您的结束宽度/高度,以允许更自然的动画,具体取决于您的目标。我可以更新Codepen,以包含一个我想要的例子。

请告诉我这是你的目标!

编辑:修复了Codepen链接

答案 1 :(得分:0)

我通过向元素添加变换:scaleY(0)来解决这个问题,然后使用不透明度上的元素为动画设置动画:0为动画的前1%,因此您无法看到元素& #39;放大&#39;可以这么说。我使用了刻度而不是宽度和高度,因为宽度和高度属性在实现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)}
}