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 `<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`. 17 The `transformOrigin` defaults to `50% 0`. 18 19 Configuration: 20 ``` 21 { 22 name: 'slide-from-bottom-animation', 23 node: <node>, 24 transformOrigin: <transform-origin>, 25 timing: <animation-timing> 26 } 27 ``` 28 --> 29 30 <script> 31 32 Polymer({ 33 34 is: 'slide-from-bottom-animation', 35 36 behaviors: [ 37 Polymer.NeonAnimationBehavior 38 ], 39 40 configure: function(config) { 41 var node = config.node; 42 43 this._effect = new KeyframeEffect(node, [ 44 {'transform': 'translateY(100%)'}, 45 {'transform': 'translateY(0)'} 46 ], this.timingFromConfig(config)); 47 48 if (config.transformOrigin) { 49 this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 50 } else { 51 this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); 52 } 53 54 return this._effect; 55 } 56 57 }); 58 59 </script> 60
