Disable transitions on page load

2015-12-15 13:29:30 +01:00 · 2015-12-15 13:29:30 +01:00 · 99f0a348c5
parent 4a10e2d758
commit 99f0a348c5
3 changed files with 11 additions and 1 deletions
--- a/application/layouts/scripts/layout.phtml
+++ b/application/layouts/scripts/layout.phtml
@ -48,7 +48,7 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
  <![endif]-->
  <link type="image/png" rel="shortcut icon" href="<?= $this->baseUrl('img/favicon.png') ?>" />
 </head>
-<body id="body">
+<body id="body" class="loading">
 <pre id="responsive-debug"></pre>
 <div id="layout" class="default-layout<?php if ($showFullscreen): ?> fullscreen-layout<?php endif ?>">
 <?= $this->render($innerLayoutScript); ?>
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@ -137,3 +137,12 @@ td, th {
    margin-left: 0;
  }
 }
+
+// Styles for when the page is loading. JS will remove this class once the document is ready
+.loading * {
+  // Disable all transition on page load
+  -webkit-transition: none !important;
+     -moz-transition: none !important;
+       -o-transition: none !important;
+          transition: none !important;
+}
--- a/public/js/icinga/events.js
+++ b/public/js/icinga/events.js
@ -161,6 +161,7 @@
        },

        onLoad: function (event) {
+            $('body').removeClass('loading');
            //$('.container').trigger('rendered');
        },