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="../neon-animation-behavior.html"> 13 <link rel="import" href="../web-animations.html"> 14 15 <!-- 16 `<transform-animation>` animates a custom transform on an element. Use this to animate multiple 17 transform properties, or to apply a custom transform value. 18 19 Configuration: 20 ``` 21 { 22 name: 'transform-animation', 23 node: <node>, 24 transformOrigin: <transform-origin>, 25 transformFrom: <transform-from-string>, 26 transformTo: <transform-to-string>, 27 timing: <animation-timing> 28 } 29 ``` 30 --> 31 32 <script> 33 34 Polymer({ 35 36 is: 'transform-animation', 37 38 behaviors: [ 39 Polymer.NeonAnimationBehavior 40 ], 41 42 /** 43 * @param {{ 44 * node: !Element, 45 * transformOrigin: (string|undefined), 46 * transformFrom: (string|undefined), 47 * transformTo: (string|undefined), 48 * timing: (Object|undefined) 49 * }} config 50 */ 51 configure: function(config) { 52 var node = config.node; 53 var transformFrom = config.transformFrom || 'none'; 54 var transformTo = config.transformTo || 'none'; 55 56 this._effect = new KeyframeEffect(node, [ 57 {'transform': transformFrom}, 58 {'transform': transformTo} 59 ], this.timingFromConfig(config)); 60 61 if (config.transformOrigin) { 62 this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 63 } 64 65 return this._effect; 66 } 67 68 }); 69 70 </script> 71
