1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject 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-right-animation>` animates the transform of an element from 17`translateX(100%)` to `none`. 18The `transformOrigin` defaults to `0 50%`. 19 20Configuration: 21``` 22{ 23 name: 'slide-from-right-animation', 24 node: <node>, 25 transformOrigin: <transform-origin>, 26 timing: <animation-timing> 27} 28``` 29--> 30 31<script> 32 33 Polymer({ 34 35 is: 'slide-from-right-animation', 36 37 behaviors: [ 38 Polymer.NeonAnimationBehavior 39 ], 40 41 configure: function(config) { 42 var node = config.node; 43 44 this._effect = new KeyframeEffect(node, [ 45 {'transform': 'translateX(100%)'}, 46 {'transform': 'none'} 47 ], this.timingFromConfig(config)); 48 49 if (config.transformOrigin) { 50 this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 51 } else { 52 this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); 53 } 54 55 return this._effect; 56 } 57 58 }); 59 60</script> 61