时间戳

首页 > 解决方案 > CSS动画侧面板

css - CSS动画侧面板

问题描述

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

app.component.html

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

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

menu.component.html

<div class="menu-panel" (click)="$event.stopPropagation();">

样式.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;
}

标签： cssangularcss-animations

解决方案

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

推荐阅读