scss mixin only runs once in my Angular project

Question

I have been messing with animations and I am trying to add one to my sidebar. Basically, I would like the items in the sidebar to fade in each time the drawer expands.

Which it does. But only once. Then, if I want it to do it again, I have to reload. Here's the scss:

@mixin animate($animation, $duration, $method, $times) {
  animation: $animation $duration $method $times;
}

@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

.links {
  @include keyframes(fadein) {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  @include animate(fadein, 2s, ease-in, 1);
}

I am wondering what I have missed here, or if there is a better way in general within Angular to get the sidebar to animate each time the drawer expands, not just the first time.

Answer 1

A way that worked for me was to add a Boolean flag to toggle visibility. For whatever reason, this allowed the scss to reset each time the sidebar was opened, instead of just the first time.