third_party/polymer/v1_0/components/neon-animation/animations/slide-right-animation.html

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