Question

关于霓虹动画（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
         }
       }
     }
   }

在上面的代码示例中（特别是＆＃34; // here＆＃34;），我试图在多个div实例上运行'bounce-in-animation'而不是一个。这目前可行吗？

我尝试了上面的代码，得到了一个“无法执行”的代码。错误类型。所以我真的在问是否有办法实现上述代码的目的。感谢

Answer 1

您必须导入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>

编辑：如果您对导入感到困惑 - 从bower_components导入，我必须从这些来源导入才能使演示工作。

EDIT2 ：在阅读完你的评论后，我有了另一个想法：你可以告诉Polymer，每次初始化元素时，你都希望它检查其中的所有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
                }
              } }
            }
          },
		  ready: function() {
		    var divsNL = Polymer.dom(this.root).querySelectorAll('div');
			var divs = Array.prototype.slice.call(divsNL);
			var output = [];
			divs.forEach(function(item) {
			  output.push({
                name: 'fade-in-animation',
   				    node: item,
	            timing: { duration: 1000 }
              });
			});
			this.set('animationConfig.entry', output);
		  },
          runAnimation: function() {
            this.playAnimation('entry')
          }
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>
</html>

聚合物霓虹动画：我可以用一个动画为多个节点设置动画吗？

1 个答案: