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 `<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it 17 scales in both the x and y axes. 18 19 Configuration: 20 ``` 21 { 22 name: 'scale-down-animation', 23 node: <node>, 24 axis: 'x' | 'y' | '', 25 transformOrigin: <transform-origin>, 26 timing: <animation-timing> 27 } 28 ``` 29 --> 30 31 <script> 32 33 Polymer({ 34 35 is: 'scale-down-animation', 36 37 behaviors: [ 38 Polymer.NeonAnimationBehavior 39 ], 40 41 configure: function(config) { 42 var node = config.node; 43 44 var scaleProperty = 'scale(0, 0)'; 45 if (config.axis === 'x') { 46 scaleProperty = 'scale(0, 1)'; 47 } else if (config.axis === 'y') { 48 scaleProperty = 'scale(1, 0)'; 49 } 50 51 this._effect = new KeyframeEffect(node, [ 52 {'transform': 'scale(1,1)'}, 53 {'transform': scaleProperty} 54 ], this.timingFromConfig(config)); 55 56 if (config.transformOrigin) { 57 this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 58 } 59 60 return this._effect; 61 } 62 63 }); 64 65 </script> 66
