diff options
Diffstat (limited to 'catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html')
-rw-r--r-- | catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html new file mode 100644 index 00000000..e3a00725 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html @@ -0,0 +1,46 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../../polymer/polymer.html"> +<link rel="import" href="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent +webkit/safari from drawing a frame before an animation for elements that animate from display:none. +--> + +<script> + + Polymer({ + + is: 'opaque-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + this._effect = new KeyframeEffect(node, [ + {'opacity': '1'}, + {'opacity': '1'} + ], this.timingFromConfig(config)); + node.style.opacity = '0'; + return this._effect; + }, + + complete: function(config) { + config.node.style.opacity = ''; + } + + }); + +</script> |