我有一个菜单系统,当点击'菜单'按钮时,一些简单的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>
答案 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)}
}