| OLD | NEW |
| (Empty) |
| 1 /** | |
| 2 * Upon scrolling past a threshold, fade in the rear background layer and fade
out the front | |
| 3 * background layer (opacity CSS transitioned over time). | |
| 4 * | |
| 5 * | |
| 6 */ | |
| 7 Polymer.AppLayout.registerEffect('fade-background', { | |
| 8 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 9 setUp: function setUp(config) { | |
| 10 var fx = {}; | |
| 11 var duration = config.duration || '0.5s'; | |
| 12 fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer'); | |
| 13 fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); | |
| 14 fx.backgroundFrontLayer.style.willChange = 'opacity'; | |
| 15 fx.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)'; | |
| 16 fx.backgroundFrontLayer.style.transitionProperty = 'opacity'; | |
| 17 fx.backgroundFrontLayer.style.transitionDuration = duration; | |
| 18 fx.backgroundRearLayer.style.willChange = 'opacity'; | |
| 19 fx.backgroundRearLayer.style.webkitTransform = 'translateZ(0)'; | |
| 20 fx.backgroundRearLayer.style.transitionProperty = 'opacity'; | |
| 21 fx.backgroundRearLayer.style.transitionDuration = duration; | |
| 22 this._fxFadeBackground = fx; | |
| 23 }, | |
| 24 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 25 run: function run(p, y) { | |
| 26 var fx = this._fxFadeBackground; | |
| 27 if (p >= 1) { | |
| 28 fx.backgroundFrontLayer.style.opacity = 0; | |
| 29 fx.backgroundRearLayer.style.opacity = 1; | |
| 30 } else { | |
| 31 fx.backgroundFrontLayer.style.opacity = 1; | |
| 32 fx.backgroundRearLayer.style.opacity = 0; | |
| 33 } | |
| 34 }, | |
| 35 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 36 tearDown: function tearDown() { | |
| 37 delete this._fxFadeBackground; | |
| 38 } | |
| 39 }); | |
| OLD | NEW |