third_party/polymer/v1_0/components/neon-animation/animations/fade-in-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 `<fade-in-animation>` animates the opacity of an element from 0 to 1.
  17
  18 Configuration:
  19 ```
  20 {
  21   name: 'fade-in-animation',
  22   node: <node>
  23   timing: <animation-timing>
  24 }
  25 ```
  26 -->
  27
  28 <script>
  29
  30   Polymer({
  31
  32     is: 'fade-in-animation',
  33
  34     behaviors: [
  35       Polymer.NeonAnimationBehavior
  36     ],
  37
  38     configure: function(config) {
  39       var node = config.node;
  40       this._effect = new KeyframeEffect(node, [
  41         {'opacity': '0'},
  42         {'opacity': '1'}
  43       ], this.timingFromConfig(config));
  44       return this._effect;
  45     }
  46
  47   });
  48
  49 </script>