From 535a0029f92d9f18086201cb523ddb5ba9e3431f Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Tue, 24 Sep 2024 19:20:13 -0700 Subject: [PATCH] Replace some JS with the `@starting-style` CSS directive Oh sweet, I learned about a new CSS feature with good-enough support! This lets you use CSS transitions for an element as it enters the page, or becomes visible. Firefox only has partial support for this feature rn, but its partial support covers our case, I tested to make sure! (Specifically, it doesn't handle transitioning from `display: none` yet, which isn't what we're doing.) --- app/assets/javascripts/outfit-viewer.js | 4 ---- app/assets/stylesheets/items/show.sass | 18 ++++++++---------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js index 3f597b1b..cff10e62 100644 --- a/app/assets/javascripts/outfit-viewer.js +++ b/app/assets/javascripts/outfit-viewer.js @@ -21,10 +21,6 @@ class OutfitViewer extends HTMLElement { this.#setIsPlaying(playPauseToggle.checked); this.#setIsPlayingCookie(playPauseToggle.checked); }); - - // Tell the CSS our first frame has rendered, which we use for loading - // state transitions. - this.#internals.states.add("after-first-frame"); } #setIsPlaying(isPlaying) { diff --git a/app/assets/stylesheets/items/show.sass b/app/assets/stylesheets/items/show.sass index 7d5a4105..77ae18a8 100644 --- a/app/assets/stylesheets/items/show.sass +++ b/app/assets/stylesheets/items/show.sass @@ -178,19 +178,17 @@ outfit-viewer // is loading. // // We only apply the delay here, not on the base styles, because fading -// *out* on load should be instant. We also wait for the outfit-viewer to -// execute a `setTimeout(0)`, to make sure we always *start* in the -// non-loading state. This is because it's sometimes possible for the page to -// start with the web component already in `state(loading)`, and we need to -// make sure we *start* in *non-loading* state for the transition delay to -// happen. (This can happen when you Turbo-navigate between multiple items.) +// *out* on load should be instant. #item-preview[busy] outfit-viewer, outfit-viewer:has(outfit-layer:state(loading)) cursor: wait - &:state(after-first-frame) - .loading-indicator - opacity: 1 - transition-delay: 2s + .loading-indicator + opacity: 1 + transition-delay: 2s + + // If the outfit *starts* in loading state, still delay the fade-in. + @starting-style + opacity: 0 #item-preview:has(outfit-layer:state(error)) outfit-viewer