名为`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动画中介绍的... :

5.21 Element接口扩展

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

Element implements Animatable;

这允许以下类型的使用.

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

获取事件处理程序的当前值的步骤10中解释了此行为:

词汇环境范围

1. 如果H是元素的事件处理程序,那么让Scope成为NewObjectEnvironment(文档,全局环境)的结果.

   否则,H是Window对象的事件处理程序:让 Scope成为全局环境.

2. 如果表单所有者不为null,则让Scope为NewObjectEnvironment(表单所有者,作用域)的结果.

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属性而不是内容属性1:

  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 Transitions仅在它们导致样式更改时才生成事件).

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

这是原始animate函数的用法示例:

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