OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Replace some JS with the @starting-style CSS directive

Browse source 
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.)
This commit is contained in:
Emi Matchu 2024-09-24 19:20:13 -07:00
parent c0e4291745
commit 535a0029f9
2 changed files with 8 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/outfit-viewer.js
View file

@ -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) {

12
app/assets/stylesheets/items/show.sass
View file

@ -178,20 +178,18 @@ 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
// 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
border: 2px solid red