到目前为止,我已经通过现代化检查检查了一切。我的图片底框高度为30%。在:hover上,一个隐藏的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上没有动画运行(像现在一样)。意味着在这种情况下是否有办法使现代化器过时,或者是否有办法用它来覆盖no-js情况?最好的问候拉尔夫

最佳答案

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

10-05 20:47
查看更多