3

我正在尝试使用 Velocity.js 和 Modernizr 为基于 CSS3 的动画包含 Microsoft Internet Explorer 8 的 JavaScript 后备。这是我正在开发的网站（这是一个关于跨浏览器兼容性的案例研究）。

http://bit.ly/1G03UMo

我就是这样做的。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript">
    Modernizr.load([{
        test: Modernizr.csstransforms && Modernizr.csstransforms3d && Modernizr.cssanimations,
        nope: ['http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js', 'js/animatie.js']
    }]);
</script>

Modernizr 测试（csstransforms、csstransforms3d 和 cssanimations）都返回一个合乎逻辑的答案 - IE 中的“no-xxx”。nope 数组中提到的文件都在这种情况下加载。

animatie.js 文件的内容如下。

$(document).ready(function(){
    $('div#tandwiel').velocity({
        rotateZ: '360deg'
    },
    {
        duration: 10000,
        easing: 'linear',
        loop: true
    });
});

我很确定 jQuery 代码是正确的，因为输出到控制台会产生可预测的结果。我也很确定 Velocity.js 已加载，因为像 opacity 这样的枯燥属性动画实际上在每个浏览器中都有效。

在 Velocity.js 文档中，我发现它实际上并不需要 jQuery 来执行它的魔力，但它应该包含在 IE8 中以使其工作。

我排除了一些事情。

  • 它几乎不可能是语法错误。查了三次。
  • 它与加载顺序没有任何关系。加载 animatie.js 文件时似乎加载了 jQuery。yepnope 库也尊重所提及文件的顺序。
  • 不可能是 Velocity.js，因为作者比我聪明得多，而且没有太多抱怨它在 IE8 中不起作用。

（我知道，旋转齿轮不会影响或破坏用户体验，但我想知道这里发生了什么）。

任何帮助是极大的赞赏。

4

1 回答 1

1

SCRIPT5022：Velocity：IE8 及更低版本要求在 Velocity 之前加载 jQuery。文件：velocity.min.js，行：3，列：9801

打开问题中的链接时，这会显示在 ie8 的控制台中。
您是否尝试过通过modernizr 加载jquery？

    Modernizr.load([{
        test: Modernizr.csstransforms && Modernizr.csstransforms3d && Modernizr.cssanimations,
        nope: ['http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js', 'js/animatie.js'],
        both: ['http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js']
    }]);
于 2015-03-11T21:23:56.063 回答