名为 `animate` 的 JS 函数在 Chrome 中不起作用，但在 IE 中起作用

Question

这行不通，什么也没有发生。 我如何让它工作，我做错了什么？

 function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }

 #demo { position: absolute; }

 <p id='demo' onclick="animate()">lolol</p>

Answer 1

问题是，由于您使用事件处理程序内容属性，您的全局函数...

window.animate

……被……遮住了

Element.prototype.animate

...最近在Web Animations 中引入：

5.21 Element接口的扩展

由于 DOM Elements 可能是动画的目标，因此Element接口 [ DOM4 ] 扩展如下：

 Element implements Animatable;

这允许以下类型的用法。

 elem.animate({ color: 'red' }, 2000);

此行为在获取事件处理程序的当前值的第 10 步中进行了解释：

词法环境范围

1. 如果H是元素的事件处理程序，则让Scope成为 NewObjectEnvironment( document ，全局环境) 的结果。

   否则， H是Window对象的事件处理程序：让Scope成为全局环境。

2. 如果表单所有者不为空，则让Scope为 NewObjectEnvironment( form owner , Scope ) 的结果。

3. 如果element不为 null，则令Scope为 NewObjectEnvironment( element, Scope ) 的结果。

注意： NewObjectEnvironment() 在 ECMAScript 第 5 版第10.2.2.3节NewObjectEnvironment (O, E) 中定义

这意味着目标元素的范围会影响全局范围。

因此，您可以

• 重命名您的函数

   function animate__() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }

   #demo { position: absolute; }

   <p id='demo' onclick="animate__()">Click me</p>

• 使用window.animate （假设window没有被阴影化）：

   <p id='demo' onclick="window.animate()">Click me</p> 

   function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }

   #demo { position: absolute; }

   <p id='demo' onclick="window.animate()">Click me</p>

• 使用事件处理程序 IDL 属性而不是内容属性一：

   document.getElementById('demo').onclick = animate; 

   function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; } document.getElementById('demo').onclick = animate;

   #demo { position: absolute; }

   <p id='demo'>Click me</p>

• 使用事件侦听器而不是事件处理程序：

   document.getElementById('demo').addEventListener('click', animate); 

   function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; } document.getElementById('demo').addEventListener('click', animate);

   #demo { position: absolute; }

   <p id='demo'>Click me</p>

Answer 2

如评论中所述，修复方法是重命名该函数，因为 Chrome 似乎保留了原始名称。

element.animate()

即将推出的 Web Animations JavaScript API 可让您通过脚本为 Web 内容制作动画。 今天 Beta 版中包含的 element.animate() 函数是 Chrome 中发布的 API 的第一部分：它使使用 JavaScript 创建简单的 CSS 动画成为可能。 这意味着可以动态生成动画而无需支付 CSS 样式重新计算成本。 以这种方式创建的动画也是可取消的，并提供有保证的结束事件（相比之下，CSS 过渡仅在导致样式更改时才生成事件）。

http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html

这是原始animate函数的使用示例：

elem.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(100px)'}
], 3000);

Answer 3

我刚刚遇到了同样的问题。 现在我知道 'animate' 是一个保留字之类的东西。 我将函数的名称从“animate”更改为“anim”，程序运行良好。 什么恶作剧！