我試圖創建一個用SCSS關閉動畫漢堡菜單。但是由于某些原因，動畫不能像預期的那樣工作。

雖然我在混音中給了它們相反的方向，但是兩個紅色條的旋轉方向是相同的。

@mixin bar-rotation($deg){
    @keyframes bar-rotation {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate($deg);
        }
    }

    animation-name: bar-rotation;
    animation-timing-function: linear;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.bar-first-transformed {
    @extend .bar-first;
    @include bar-rotation(45deg);
}

.bar-third-transformed {
    @extend .bar-third;
    @include bar-rotation(-45deg);
}

JS Fiddle中的完整代碼: https://jsfiddle.net/ntfzy2g5/

在SCSS沒有動畫功能范圍的概念。換句話說，如果您兩次使用同一個動畫名稱，您就轉換了動畫，這對于調用它的所有元素都保持不變。 你可以找到一種方法給你的動畫起一個唯一的名字，比如用一個隨機生成的字符串，或者使用過渡和類來制作從0度到$度的動畫。我強烈推薦最后一個生成多個動畫的方法。

%bar {
    // ...
    transition: .2s linear;
}
@mixin bar-rotation($deg) {
    transform: rotate($deg);
}
// ...
.bar-first-transformed {
    @extend .bar-first;
    .navigation-menu-button.active & {
       @include bar-rotation(45deg);      
    }
}
// OR
.navigation-menu-button {
    // ...
    &.active {
        .bar-first {
            @include bar-rotation(45deg);
        } // and so on
    }
}