聚合物霓虹燈動畫：我可以用一個動畫動畫多個節點嗎？

關於霓虹燈動畫（https://elements.polymer-project.org/guides/using-neon-animations）聚合物霓虹燈動畫：我可以用一個動畫動畫多個節點嗎？

是否可以指定相同的動畫，同時在多個節點上運行？例如：

animationConfig: { 
    value: function() { 
     return { 
     'entry': { 
      name: 'bounce-in-animation', 
      node: Polymer.dom(this.root).querySelectorAll("div"), // here 
      timing: {duration: 1000} 
     }, 
     'exit': { 
      name: 'fade-out-animation', 
      node: this 
     } 
     } 
    } 
    }

在上述代碼中的樣品（特別是在「//這裏」），我試圖在多個格的實例，而不是僅僅一個運行「彈跳在動畫」。這是目前可能的嗎？

我試了上面的代碼，並得到了'不能執行'類型的錯誤。所以我真的在問是否有辦法實現上面的代碼。由於

來源

2016-06-29 Nodelay Heehoo

你必須導入cascaded-animation並在entry定義使用：

{ 
    name: 'cascaded-animation', 
    animation: 'bounce-in-animation', 
    nodes: Polymer.dom(this.root).querySelectorAll("div"), 
    nodeDelay: 0, // You can use this to delay animation between each node 
    timing: {duration: 1000} 
}

這裏有一個快速演示：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Polymer cascaded animation</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script> 
 
    <link href="https://polygit.org/components/polymer/polymer.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import"> 
 
</head> 
 
<body> 
 
    <dom-module id="x-foo"> 
 
    <template> 
 
     <div> 
 
     Hi! I'm a div! 
 
     </div> 
 
     <div> 
 
     Hello! I'm another div! 
 
     </div> 
 
     <div> 
 
     And I'm the last div! 
 
     </div> 
 
     <button on-tap="runAnimation">Click me!</button> 
 
    </template> 
 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
     Polymer({ 
 
      is: 'x-foo', 
 
      behaviors: [ 
 
      Polymer.NeonAnimationRunnerBehavior 
 
      ], 
 
      properties: { 
 
      animationConfig: { 
 
       value: function() { return { 
 
       'entry': { 
 
        name: 'cascaded-animation', 
 
        animation: 'fade-in-animation', 
 
        nodes: Polymer.dom(this.root).querySelectorAll("div"), 
 
        nodeDelay: 0, // You can use this to delay animation between each node 
 
        timing: {duration: 1000} 
 
       } 
 
       } } 
 
      } 
 
      }, 
 
      runAnimation: function() { 
 
      this.playAnimation('entry') 
 
      } 
 
     }); 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
    <x-foo></x-foo> 
 
</body> 
 
</html>

編輯：如果您對進口感到困惑 - 從進口，我不得不從這些來源導入，以使演示工作。

EDIT2：閱讀您的評論後，我有另一個想法：你可以告訴聚合物，每次元素初始化時，你想要它檢查其中的所有div併爲這個註冊動畫。我不是最好的描述，但也許演示將幫助你更好地理解它：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Polymer cascaded animation</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script> 
 
    <link href="https://polygit.org/components/polymer/polymer.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import"> 
 
    <link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import"> 
 
</head> 
 
<body> 
 
    <dom-module id="x-foo"> 
 
    <template> 
 
     <div> 
 
     Hi! I'm a div! 
 
     </div> 
 
     <div> 
 
     Hello! I'm another div! 
 
     </div> 
 
     <div> 
 
     And I'm the last div! 
 
     </div> 
 
     <button on-tap="runAnimation">Click me!</button> 
 
    </template> 
 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
     Polymer({ 
 
      is: 'x-foo', 
 
      behaviors: [ 
 
      Polymer.NeonAnimationRunnerBehavior 
 
      ], 
 
      properties: { 
 
      animationConfig: { 
 
       value: function() { return { 
 
       'entry': { 
 
        // Leave empty 
 
       } 
 
       } } 
 
      } 
 
      }, 
 
\t \t ready: function() { 
 
\t \t  var divsNL = Polymer.dom(this.root).querySelectorAll('div'); 
 
\t \t \t var divs = Array.prototype.slice.call(divsNL); 
 
\t \t \t var output = []; 
 
\t \t \t divs.forEach(function(item) { 
 
\t \t \t output.push({ 
 
       name: 'fade-in-animation', 
 
    \t \t \t \t  node: item, 
 
\t    timing: { duration: 1000 } 
 
       }); 
 
\t \t \t }); 
 
\t \t \t this.set('animationConfig.entry', output); 
 
\t \t }, 
 
      runAnimation: function() { 
 
      this.playAnimation('entry') 
 
      } 
 
     }); 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
    <x-foo></x-foo> 
 
</body> 
 
</html>

來源

2016-06-30 12:09:35

感謝Wiktor的您的回覆。我嘗試了你的代碼，它確實對多個元素進行了動畫處理，但只是同時進行。即使當上面的'nodeDelay'被設置爲0時，每個元素與下一個/相鄰元素的動畫之間仍然存在可感知的延遲。因此，這具有級聯效果，就像動畫的連鎖反應一樣，但不完全是同時發生的我正在尋找一個。我想知道是否有像'同步動畫'（VS級聯動畫）那裏... –

我沒有聽到任何關於這種動畫，但我有一個想法，我今天晚些時候編輯這個帖子與另一個演示 –

聚合物霓虹燈動畫：我可以用一個動畫動畫多個節點嗎？

回答

相關問題