Question

我正在学习聚合物。我有一个包含div的元素。我想为这个div的高度制作动画。为了做到这一点，我得到了以下内容：

我-element.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为＆＃34; container＆＃34;的div元素集成。我看到的一切似乎只适用于Polymer元素。然而，我试图找出如何使用Polymer为div制作动画。我错过了什么？

谢谢！

Answer 1

聚合物元素页面有一个很酷的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

聚合物 - 动画DIV

1 个答案: