Home | History | Annotate | Download | only in doc
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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