From f8bebb769dfccfead3dbd5790e893ee28368e620 Mon Sep 17 00:00:00 2001 From: Karel-Jan Van Haute Date: Thu, 18 Apr 2024 10:58:04 +0200 Subject: [PATCH] Block initial transitions Fixes #301 --- tailoff/css/site/base/base.css | 4 ++++ tailoff/js/components/general.component.ts | 23 +++++++++++++++++----- templates/_site/_layout.twig | 2 +- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/tailoff/css/site/base/base.css b/tailoff/css/site/base/base.css index 31a0b176..ad456ec4 100644 --- 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 index 57109e69..0e2c2ff3 100644 --- a/tailoff/js/components/general.component.ts +++ b/tailoff/js/components/general.component.ts @@ -1,8 +1,21 @@ 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. @@ -10,10 +23,10 @@ export class GeneralComponent { 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 index 7a3ae17b..23fcf337 100644 --- a/templates/_site/_layout.twig +++ b/templates/_site/_layout.twig @@ -29,7 +29,7 @@ {% endif %} - + {% if not craft.app.request.isPreview() %} {# put GTM here #}