Merge pull request #333 from statikbe/KarelJanVanHaute/issue301

Block initial transitions
statikbe · May 16, 2024 · e23564c · e23564c
2 parents d23f459 + 9e8860a
commit e23564c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/tailoff/css/site/base/base.css b/tailoff/css/site/base/base.css
@@ -113,6 +113,10 @@
   }
 }
 
+.preload-transitions * {
+  transition: none !important;
+}
+
 /* .lazyload,
 .lazyloading {
   opacity: 0;

diff --git a/tailoff/js/components/general.component.ts b/tailoff/js/components/general.component.ts
@@ -1,19 +1,32 @@
 export class GeneralComponent {
   constructor() {
-    const bodyElement = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
-    bodyElement.classList.add('js-enabled');
+    const bodyElement = document.getElementsByTagName(
+      "BODY"
+    )[0] as HTMLBodyElement;
+    bodyElement.classList.add("js-enabled");
     this.addOutlineForTabbers();
+
+    const node = document.querySelector(".preload-transitions");
+    document.addEventListener("DOMContentLoaded", function () {
+      node.classList.remove("preload-transitions");
+    });
+    if (
+      document.readyState === "interactive" ||
+      document.readyState === "complete"
+    ) {
+      node.classList.remove("preload-transitions");
+    }
   }
 
   // This adds a class if the user is tabbing and thus using the keyboard, so the focus style will be visible. Otherwise if it's a clicker the focus is removed.
   private addOutlineForTabbers() {
     function handleFirstTab(e) {
       if (e.keyCode === 9) {
         // the "I am a keyboard user" key
-        document.body.classList.add('user-is-tabbing');
-        window.removeEventListener('keydown', handleFirstTab);
+        document.body.classList.add("user-is-tabbing");
+        window.removeEventListener("keydown", handleFirstTab);
       }
     }
-    window.addEventListener('keydown', handleFirstTab);
+    window.addEventListener("keydown", handleFirstTab);
   }
 }
diff --git a/templates/_site/_layout.twig b/templates/_site/_layout.twig
@@ -29,9 +29,8 @@
 		{% endif %}
 	</head>
 
-	<body class="page-{{ craft.app.request.getSegment(1) ?: 'home' }} {% block bodyClasses %}{% endblock %}">
-		{% apply enkode_emails %}
-
+	<body class="page-{{ craft.app.request.getSegment(1) ?: 'home' }} {% block bodyClasses %}{% endblock %} preload-transitions">
+  		{% apply enkode_emails %}
 			{% if not craft.app.request.isPreview() %}
 				{# put GTM here #}
 			{% endif %}