到目前为止,我已经通过现代化检查检查了一切。我的图片底框高度为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