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