diff --git a/src/boot.js b/src/boot.js index 535cb5ac7e..ae033c0bf2 100644 --- a/src/boot.js +++ b/src/boot.js @@ -6,15 +6,71 @@ (function(scope) { -// FOUC prevention tactic -var style = document.createElement('style'); -style.textContent = 'body {opacity: 0;}'; -var head = document.querySelector('head'); -head.insertBefore(style, head.firstChild); - -window.addEventListener('WebComponentsReady', function() { - document.body.style.webkitTransition = 'opacity 0.3s'; - document.body.style.opacity = 1; -}); + // FOUC prevention tactic + // default list of veiled elements + scope.veiledElements = ['body']; + // add polymer styles + var VEILED_CLASS = 'polymer-veiled'; + var UNVEIL_CLASS = 'polymer-unveil'; + var TRANSITION_TIME = 0.3; + var style = document.createElement('style'); + style.textContent = '.' + VEILED_CLASS + ' { ' + + 'visibility: hidden; opacity: 0; } \n' + + '.' + UNVEIL_CLASS + '{ ' + + '-webkit-transition: opacity ' + TRANSITION_TIME + 's; ' + + 'transition: opacity ' + TRANSITION_TIME +'s; }\n'; + var head = document.querySelector('head'); + head.insertBefore(style, head.firstChild); + + // apply veiled class + function veilElements() { + var veiled = Polymer.veiledElements; + if (veiled) { + for (var i=0, l=veiled.length, u; (i + + + + unveil + + + + + + + + + + + + + + + + + + diff --git a/test/js/styling.js b/test/js/styling.js index 45de82b1a1..80d5b2578e 100644 --- a/test/js/styling.js +++ b/test/js/styling.js @@ -8,5 +8,6 @@ htmlSuite('styling', function() { htmlTest('html/styling/sheet-scope.html'); htmlTest('html/styling/sheet-main-doc.html'); htmlTest('html/styling/apply-reset-styles.html'); + htmlTest('html/styling/unveil.html'); });