Polymer - Animating a DIV

Question

I am learning Polymer. I have a element that includes a div. I want to animate that div's height. In an attempt to do this, I've got the following:

my-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>

I then used the grow height animation shown here for inspiration. So, I basically, have a animation defined like this:

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

My challenge is, I do not understand how to integrate this animation with the div 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 div using Polymer. What am I missing?

Thanks!

Answer 1

The polymer elements page has a cool guide on animations, but I'm guessing you already read it and it didn't quite answer your question, if that's the case, this should be helpful.

First of all, what you already have done is ok, what you have left to do is a couple of things:

• Your element should implement the NeonAnimationRunnerBehavior to be able to run animations on it's local DOM
• Once it implements the behavior, you should redefine the animationConfig property so that it has the animations it will run and how it will run them
• Lastly, you should call this.playAnimation('animationName') so that the animation is run when you need it to run

Here's how the code would look in the end after all this changes using the animation you defined:

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

And here's a working fiddle of everything