聚合物 - 动画DIV

Question

我正在学习聚合物.我有一个包含a的元素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>

然后我使用这里显示的成长高度动画来获取灵感.所以,基本上,我有一个像这样定义的动画:

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;
  }
});

我的挑战是,我不明白如何将此动画与divid为"container" 的元素集成.我看到的一切似乎只适用于Polymer元素.然而,我正在试图弄清楚如何div使用聚合物制作动画.我错过了什么？

谢谢!

Answer 1

聚合物元素页面有一个很酷的动画指南，但我猜您已经阅读过它，但它并没有完全回答您的问题，如果是这样的话，这应该会有所帮助。

首先，你已经完成的事情就可以了，你还需要做几件事：

• 你的元素应该实现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');
      }
    });

这是一切的工作小提琴