Question

我尝试为div实现简单的2状态颜色转换

它在一个有角度的项目中，它使用CSS的scss文件

我发现了其他一些与此相关的主题，但是即使我尝试应用修复程序，它仍然无法在Firefox中使用

这是我使用以下代码的方式：

@include errorDivPulse($black,$orange,$white,#ff1200,animC);
.errorDiv {
    @include errorDiv($black,$orange,animC);
}

它看起来像这样（只是带有前缀的重复）：

@mixin errorDiv($foreGround,$backGround,$animName) {
    color: $foreGround !important; 
    background-color: $backGround !important; 

    @if($animName) {
        -moz-animation: $animName 1s infinite;
        -webkit-animation: $animName 1s infinite;
        -ms-animation: $animName 1s infinite;
        animation: $animName 1s infinite;
    }
}

@mixin errorDivPulse ($color1, $backGround1, $color2, $backGround2,$animName ) {
    @-moz-keyframes #{$animName} {
        0% {
            color: $color1;
            background-color: $backGround1; 
        }
        50% {
            color: $color2;
            background-color: $backGround2; 
        }
        100 {
            color: $color1;
            background-color: $backGround1; 
        }
    }
    @-webkit-keyframes #{$animName} {
        0% {
            color: $color1;
            background-color: $backGround1; 
        }
        50% {
            color: $color2;
            background-color: $backGround2; 
        }
        100 {
            color: $color1;
            background-color: $backGround1; 
        }
    }
    @-ms-keyframes #{$animName} {
        0% {
            color: $color1;
            background-color: $backGround1; 
        }
        50% {
            color: $color2;
            background-color: $backGround2; 
        }
        100 {
            color: $color1;
            background-color: $backGround1; 
        }
    }
    @keyframes #{$animName} {
        0% {
            color: $color1;
            background-color: $backGround1; 
        }
        50% {
            color: $color2;
            background-color: $backGround2; 
        }
        100 {
            color: $color1;
            background-color: $backGround1; 
        }
    }
}

Answer 1

答案是默认div CSS中的！important 我很蠢

@mixin errorDiv($foreGround,$backGround,$animName) {
    color: $foreGround ; 
    background-color: $backGround ; 

    @if($animName) {
        -moz-animation: $animName 1s infinite;
        -webkit-animation: $animName 1s infinite;
        -ms-animation: $animName 1s infinite;
        animation: $animName 1s infinite;
    }
}

SASS-CSS-动画只能在Chrome中使用，而不能在Firefox中使用

1 个答案: