internetexplorer-如何防止不支持的浏览器的css动画，并允许在js被停用时支持

Question

到目前为止，我已经用modernizer检查处理了一些事情。我有一张图片，底部有一个30%高的方框。打开：将隐藏的before元素悬停在图像上100%。

.fp-bb {
    .cssanimationsjs &:hover {
        @include animation('box-up 1s');
        height:100%;
        overflow:hidden;
    }   
    .cssanimationsjs &:hover .fp-pro-excerpt {
        display:block;
    }   
    .fp-pro-excerpt {
        display:none;
    }
}

该跨越动画基于：

@mixin keyframes($animation-name) {
    @-webkit-keyframes $animation-name {
        @content;
    }
    @-moz-keyframes $animation-name {
        @content;
    }
    @-ms-keyframes $animation-name {
        @content;
    }
    @-o-keyframes $animation-name {
        @content;
    }
    @keyframes $animation-name {
        @content;
    }
}
@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    -o-animation: #{$str};
    animation: #{$str};
}

基本上所有的麻烦都是为ie9完成的，因为它不支持css3动画。到目前为止，只要打开js就可以了。在所有支持的浏览器上，动画都是在不支持的ie9上运行的。我唯一的问题是，如果js被关闭，是否有可能以某种方式覆盖这个案例？动画在支持的浏览器上运行（目前还没有），在不支持的ie9上没有动画运行（就像现在一样）。也就是说，在这种情况下，有没有办法让modernizer过时，或者有没有办法用它来覆盖无js的情况？向Ralf 致以最良好的问候

Answer 1

如果您希望css动画始终在可用时运行，请不要将其用作选择器。只需关闭javascript中缺失的值（即if (no-cssanimationjs) {//do js stuff}），并完全忽略选择器中的.cssanimationsjs