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 11 <link rel="import" href="../polymer/polymer.html"> 12 <link rel="import" href="../iron-meta/iron-meta.html"> 13 14 <script> 15 16 /** 17 * Use `Polymer.NeonAnimationBehavior` to implement an animation. 18 * @polymerBehavior 19 */ 20 Polymer.NeonAnimationBehavior = { 21 22 properties: { 23 24 /** 25 * Defines the animation timing. 26 */ 27 animationTiming: { 28 type: Object, 29 value: function() { 30 return { 31 duration: 500, 32 easing: 'cubic-bezier(0.4, 0, 0.2, 1)', 33 fill: 'both' 34 } 35 } 36 } 37 38 }, 39 40 /** 41 * Can be used to determine that elements implement this behavior. 42 */ 43 isNeonAnimation: true, 44 45 /** 46 * Do any animation configuration here. 47 */ 48 // configure: function(config) { 49 // }, 50 51 /** 52 * Returns the animation timing by mixing in properties from `config` to the defaults defined 53 * by the animation. 54 */ 55 timingFromConfig: function(config) { 56 if (config.timing) { 57 for (var property in config.timing) { 58 this.animationTiming[property] = config.timing[property]; 59 } 60 } 61 return this.animationTiming; 62 }, 63 64 /** 65 * Sets `transform` and `transformOrigin` properties along with the prefixed versions. 66 */ 67 setPrefixedProperty: function(node, property, value) { 68 var map = { 69 'transform': ['webkitTransform'], 70 'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin'] 71 }; 72 var prefixes = map[property]; 73 for (var prefix, index = 0; prefix = prefixes[index]; index++) { 74 node.style[prefix] = value; 75 } 76 node.style[property] = value; 77 }, 78 79 /** 80 * Called when the animation finishes. 81 */ 82 complete: function() {} 83 84 }; 85 86 </script> 87
