css 未正确应用Sass混合动画

luaexgnf 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(172)

我正在尝试使用SCSS创建一个带有关闭动画的汉堡菜单。但由于某些原因，动画并没有按预期的那样工作。
两个红色条以相同的方向旋转，尽管我在mixin中给了它们相反的方向。

@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/

css

来源：https://stackoverflow.com/questions/76395426/sass-mixin-animations-not-applied-properly

1条答案

按热度按时间

62o28rlo1#

在SCSS中没有动画函数作用域的概念。换句话说，如果两次使用相同的动画名称，则会变换动画，而动画对于调用它的所有元素保持不变。
您可以找到一种方法为动画给予一个唯一的名称，例如使用随机生成的字符串，或者使用transition和类从0deg到$deg进行动画。我强烈推荐最后一个生成多个动画。

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

赞(0）回复(0）举报 2023-06-07

我来回答

css 未正确应用Sass混合动画

1条答案

相关问题

热门标签

最新问答