CSS动画侧面板
CSS动画侧面板
提问于 2019-12-22 22:48:18
我正在试着为侧边菜单制作动画。如果我打开菜单动画完全按照我想要的方式工作，问题是，当我关闭它时，我不能制作动画。是否有一些属性可以在菜单关闭后使其恢复动画？如果我能用css动画来做这件事就好了。
app.component.html
<app-menu *ngIf="showMenu"></app-menu>当我切换showMenu变量时，动画就会触发，但在我将其设置为假之后，它就消失了。
menu.component.html
<div class="menu-panel" (click)="$event.stopPropagation();">
styles.scss
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
@keyframes menu-panel {
0% {
background-color: #00FF9B;
left: -$menu-width;
}
100% {
background-color: #B290FF;
left: 0;
}
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
background-color: #B290FF;
animation: menu-panel 500ms linear;
z-index: 100;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-23 00:26:46
请尝试使用transition。控制是否由类.open打开panel。这只是你的想法，试着调整你自己以满足你的需要。
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
z-index: 100;
transition: all 500ms;
background-color: #00FF9B;
left: -$menu-width;
}
.menu-panel.open {
background-color: #B290FF;
left: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59445252
复制相关文章
相似问题
腾讯云开发者
