api-console-assets
Version:
This repo only exists to publish api console components to npm
54 lines (51 loc) • 2.22 kB
HTML
<!--
@license
Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
<script>
/**
* Upon scrolling past a threshold, fade in the rear background layer and fade out the front
* background layer (opacity CSS transitioned over time).
*
*
*/
Polymer.AppLayout.registerEffect('fade-background', {
/** @this Polymer.AppLayout.ElementWithBackground */
setUp: function setUp(config) {
var fx = {};
var duration = config.duration || '0.5s';
fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer');
fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer');
fx.backgroundFrontLayer.style.willChange = 'opacity';
fx.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)';
fx.backgroundFrontLayer.style.transitionProperty = 'opacity';
fx.backgroundFrontLayer.style.transitionDuration = duration;
fx.backgroundRearLayer.style.willChange = 'opacity';
fx.backgroundRearLayer.style.webkitTransform = 'translateZ(0)';
fx.backgroundRearLayer.style.transitionProperty = 'opacity';
fx.backgroundRearLayer.style.transitionDuration = duration;
this._fxFadeBackground = fx;
},
/** @this Polymer.AppLayout.ElementWithBackground */
run: function run(p, y) {
var fx = this._fxFadeBackground;
if (p >= 1) {
fx.backgroundFrontLayer.style.opacity = 0;
fx.backgroundRearLayer.style.opacity = 1;
} else {
fx.backgroundFrontLayer.style.opacity = 1;
fx.backgroundRearLayer.style.opacity = 0;
}
},
/** @this Polymer.AppLayout.ElementWithBackground */
tearDown: function tearDown() {
delete this._fxFadeBackground;
}
});
</script>