javascript - Polymer - Animating a DIV -

i learning polymer. have element includes div. want animate div's height. in attempt this, i've got 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 height of container       }     });       </script> </dom-module> 

i used grow height animation shown here inspiration. so, basically, have animation defined 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, not understand how integrate animation div element id of "container". see seems works on polymer elements. yet, i'm trying figure out how animate div using polymer. missing?

thanks!

the polymer elements page has cool guide on animations, i'm guessing read , didn't quite answer question, if that's case, should helpful.

first of all, have done ok, have left couple of things:

• your element should implement neonanimationrunnerbehavior able run animations on it's local dom
• once implements behavior, should redefine animationconfig property has animations run , how run them
• lastly, should call this.playanimation('animationname') animation run when need run

here's how code in end after changes using animation 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 working fiddle of everything