CSS动画侧面板答案

【问题标题】：CSS animation sidepanelCSS动画侧面板
【发布时间】：2019-12-23 00:26:45
【问题描述】：

我正在尝试为侧边菜单制作动画。如果我打开菜单动画完全按照我想要的方式工作，问题是，当我关闭它时我无法制作动画。菜单关闭后是否有一些属性可以使其恢复动画？如果我能用 css 动画做到这一点，那就最好了。

app.component.html

<app-menu *ngIf="showMenu"></app-menu>

当我切换 showMenu 变量时会触发动画，但在我将其设置为 false 后它就会消失。

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;
}

【问题讨论】：

@Radslav Sabo 你现在有 15 个声望，别忘了给我点个赞。

标签： css angular css-animations

【解决方案1】：

尝试改用transition。控制panel 是否由.open 类打开。这只是想法，尝试调整自己以满足您的需求。

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;
}

【讨论】：