CODEWITHSUNDEEP
cssangularcss-animations
Radoslav Sabo
Radoslav Sabo

Reputation: 45

CSS animation sidepanel

I am trying to make animation for the side menu. If I open the menu animation is working exactly how I want, the issue is, that I cannot make animation when I close it. Is there some property to make it animate back after the menu closes? Best would be if I could do it with css animations.

app.component.html

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

Animation triggers when I toggle showMenu variable but it just disappear after I set it 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;
}

Upvotes: 1

Views: 980

Answers (1)

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9938

Try using transition instead. Control whether the panel is opened by a class .open. That's just the idea, try tweaking yourself to fits your need.

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

Upvotes: 1

Related Questions