Question

到目前为止，我已经用现代化检查处理了事情。我的图像底部高度为30％。开：将隐藏的前一个元素悬停在图像上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没有动画运行（就像现在一样）。意味着有没有办法让现代化器在这种情况下过时，或者有办法设法覆盖no-js的情况吗？最好的问候拉尔夫

Answer 1

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

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

1 个答案: