1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../neon-animation-runner-behavior.html"> 12<link rel="import" href="../../animations/scale-down-animation.html"> 13 14<dom-module id="my-animatable"> 15 <template> 16 <style> 17 :host { 18 display: inline-block; 19 border-radius: 50%; 20 width: 300px; 21 height: 300px; 22 background: orange; 23 } 24 </style> 25 <content></content> 26 27 </template> 28</dom-module> 29 30<script> 31 32 Polymer({ 33 34 is: 'my-animatable', 35 36 behaviors: [ 37 Polymer.NeonAnimationRunnerBehavior 38 ], 39 40 properties: { 41 42 animationConfig: { 43 type: Object, 44 value: function() { 45 return { 46 name: 'scale-down-animation', 47 node: this 48 } 49 } 50 } 51 52 }, 53 54 listeners: { 55 'neon-animation-finish': '_onNeonAnimationFinish' 56 }, 57 58 animate: function() { 59 this.playAnimation(); 60 }, 61 62 _onNeonAnimationFinish: function() { 63 console.log('animation finish!'); 64 } 65 66 }); 67 68</script> 69