javascript - Polymer - 为 DIV 设置动画

Question

我正在学习 Polymer。我有一个包含 div 的元素。我想为那个 div 的高度设置动画。为了做到这一点，我得到了以下内容:

我的元素.html

<dom-module id="my-element">    
  <template>
    <div id="container" style="height:100px; background-color:green; color:white;">
      Hello!
    </div>

    <paper-button on-click="_onTestClick">Expand</paper-button>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      _onTestClick: function() {
        // expand the height of container
      }
    });    
  </script>
</dom-module>

然后我使用了显示的生长高度动画 here寻找灵感。所以，我基本上有一个这样定义的动画:

Polymer({
  is: 'grow-height-animation',
  behaviors: [
    Polymer.NeonAnimationBehavior
  ],
  configure: function(config) {
    var node = config.node;
    var rect = node.getBoundingClientRect();
    var height = rect.height;
    this._effect = new KeyframeEffect(node, [{
      height: (height / 2) + 'px'
    }, {
      height: height + 'px'
    }], this.timingFromConfig(config));
    return this._effect;
  }
});

我的挑战是，我不明白如何将此动画与 ID 为“container”的 div 元素集成。我所看到的一切似乎都只适用于 polymer 元素。然而，我正在尝试弄清楚如何使用 Polymer 为 div 设置动画。我错过了什么？

谢谢!

Answer 1

polymer 元素页面很酷guide on animations ，但我猜您已经阅读了它，但它并没有完全回答您的问题，如果是这样的话，这应该会有所帮助。

首先，您已经完成的工作就可以了，您还需要做一些事情:

• 您的元素应该实现 NeonAnimationRunnerBehavior 才能在其本地 DOM 上运行动画
• 一旦它实现了行为，您应该重新定义 animationConfig 属性，以便它具有将要运行的动画以及如何运行它们
• 最后，您应该调用 this.playAnimation('animationName') 以便在需要时运行动画

以下是使用您定义的动画进行所有更改后代码最终的样子:

Polymer({
      is: 'my-element',
      behaviors: [
        Polymer.NeonAnimationRunnerBehavior
      ],
      properties: {
        animationConfig: {
            type: Object,
            value: function(){
            return {
                'expand': {
                'name': 'grow-height-animation',
                'node': this.$.container
              }
            };
          }
        }
      },
      _onTestClick: function() {
        this.playAnimation('expand');
      }
    });

这是一个 working fiddle一切