third_party/polymer/v1_0/components/neon-animation/animations/opaque-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 `<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent
  17 webkit/safari from drawing a frame before an animation for elements that animate from display:none.
  18 -->
  19
  20 <script>
  21
  22   Polymer({
  23
  24     is: 'opaque-animation',
  25
  26     behaviors: [
  27       Polymer.NeonAnimationBehavior
  28     ],
  29
  30     configure: function(config) {
  31       var node = config.node;
  32       node.style.opacity = '0';
  33       this._effect = new KeyframeEffect(node, [
  34         {'opacity': '1'},
  35         {'opacity': '1'}
  36       ], this.timingFromConfig(config));
  37       return this._effect;
  38     },
  39
  40     complete: function(config) {
  41       config.node.style.opacity = '';
  42     }
  43
  44   });
  45
  46 </script>