Polymer - Animating a DIV : <p>I am learning Polymer. I have a element that includes a <code>div</code>. I want to animate that div's height. In an attempt to do this, I've got the following:</p>

<p><strong>my-element.html</strong></p>

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

    &lt;paper-button on-click="_onTestClick"&gt;Expand&lt;/paper-button&gt;
  &lt;/template&gt;

  &lt;script&gt;
    Polymer({
      is: 'my-element',

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

<p>I then used the grow height animation shown <a href="https://github.com/PolymerElements/paper-menu-button/blob/master/paper-menu-button-animations.html">here</a> for inspiration. So, I basically, have a animation defined like this:</p>

<pre><code>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;
  }
});
</code></pre>

<p>My challenge is, I do not understand how to integrate this animation with the <code>div</code> element with the id of "container". Everything I see seems like it only works on Polymer elements. Yet, I'm trying to figure out how to animate the <code>div</code> using Polymer. What am I missing?</p>

<p>Thanks!</p>
