scss mixin 在我的 Angular 项目中只运行一次

Question

我一直在搞乱动画，我想在我的侧边栏中添加一个。基本上，每次抽屉展开时，我都希望边栏中的项目淡入。

它是做什么的。但只有一次。然后，如果我想让它再做一次，我必须重新加载。这是 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);
}

我想知道我在这里遗漏了什么，或者在 Angular 中是否有更好的方法让侧边栏在每次抽屉展开时都动画化，而不仅仅是第一次。

Answer 1

一种对我有用的方法是添加一个布尔标志来切换可见性。无论出于何种原因，这都允许 scss 在每次打开边栏时重置，而不是第一次打开。

scss mixin 在我的 Angular 项目中只运行一次

scss mixin only runs once in my Angular project

angular

sass

scss-mixins