Disable animations during page load

2024-11-05 17:24:56 -08:00 · 2024-11-05 17:24:56 -08:00 · 210b590544
parent 283624706e
commit 210b590544
2 changed files with 13 additions and 1 deletions
--- a/availabili.tf/index.html
+++ b/availabili.tf/index.html
@ -6,8 +6,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>availabili.tf</title>
  </head>
-  <body>
+  <body class="preload">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
+<script>
+  window.addEventListener("load", () => {
+    document.body.classList.remove("preload");
+  });
+</script>
--- a/availabili.tf/src/assets/base.css
+++ b/availabili.tf/src/assets/base.css
@ -90,3 +90,10 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+
+body.preload * {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -ms-transition: none !important;
+ -o-transition: none !important;
+}