名為 `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”，程序運行良好。 什么惡作劇！