port polymer - 00e2982c78fcd396adaebff3118e94029a2b9fb0

pkg/polymer/lib/src/boot.dart

Index: pkg/polymer/lib/src/boot.dart
diff --git a/pkg/polymer/lib/src/boot.dart b/pkg/polymer/lib/src/boot.dart
index 8e8618faeb8ef3ab811c0d69908f83a775ea9d8c..6c2eb79a3c29b2406b422fc67a8eebb67be1495f 100644
--- a/pkg/polymer/lib/src/boot.dart
+++ b/pkg/polymer/lib/src/boot.dart
@@ -6,17 +6,39 @@
 part of polymer;
 
 /** Prevent a flash of unstyled content. */
-preventFlashOfUnstyledContent() {
+_preventFlashOfUnstyledContent() {
+
   var style = new StyleElement();
-  style.text = r'body {opacity: 0;}';
+  style.text = '.$_VEILED_CLASS { '
+      'opacity: 0; } \n'
+      '.$_UNVEIL_CLASS{ '
+      '-webkit-transition: opacity ${_TRANSITION_TIME}s; '
+      'transition: opacity ${_TRANSITION_TIME}s; }\n';
+
   // Note: we use `query` and not `document.head` to make sure this code works
   // with the shadow_dom polyfill (a limitation of the polyfill is that it can't
   // override the definitions of document, document.head, or document.body).
-  var head = query('head');
+  var head = document.querySelector('head');
   head.insertBefore(style, head.firstChild);
 
+  _veilElements();
+
+  // hookup auto-unveiling
   Polymer.onReady.then((_) {
-    document.body.style.transition = 'opacity 0.3s';
-    document.body.style.opacity = '1';
+    Polymer.unveilElements();
   });
 }
+
+// add polymer styles
+const _VEILED_CLASS = 'polymer-veiled';
+const _UNVEIL_CLASS = 'polymer-unveil';
+const _TRANSITION_TIME = 0.3;
+
+// apply veiled class
+_veilElements() {
+  for (var selector in Polymer.veiledElements) {
+    for (var node in document.querySelectorAll(selector)) {
+      node.classes.add(_VEILED_CLASS);
+    }
+  }
+}