Possible to fade the UI bar in Sugarcube?

Claretta

Sometimes I want the UI bar hidden to display background art without interference. I achieve this with:


#ui-bar.blank {
display: none;
}

<<addclass "#ui-bar" "blank">>


But, if I remove this class to put the UI back, it suddenly appearing again tends to be a bit jarring. So I want to fade it in. But unfortunately, this doesn't work:


#ui-bar.fade {
-webkit-transition: all 2s linear;
transition: all 2s linear;
}

<<removeclass "#ui-bar" "blank">>
<<addclass "#ui-bar" "fade">>


It just results in the ui bar zipping back into place and ignoring the transition commands.

Is there a way to get the fade in working as this would work with passage elements?

TheMadExile

CSS Animation 101: The display property cannot be animated and the visibility property's ability to be animated is limited.  If you want to fade the UI bar in/out, then you will need to use opacity.

Try the following CSS: (n.b. the use of the visibility property ensures that the UI bar is non-interactive while it's hidden)


#ui-bar.hide {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 400ms ease-in, visibility 400ms step-end;
transition: opacity 400ms ease-in, visibility 400ms step-end;
}
#ui-bar:not(.hide) {
-webkit-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}


Claretta

Thank you! Works perfect. The only thing that confuses me is what does the second set of times do in this part:


#ui-bar.hide {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 400ms ease-in, visibility 400ms step-end;
transition: opacity 400ms ease-in, visibility 400ms step-end;
}


While the 400ms after opacity affects the fade-in times, I can change the numbers after visibility to 10000ms with no actual effect, either in visibility or interactivity.

Note that my UI bar itself is set to be all transparent apart from the text links, so maybe it's applying to something already hidden.

TheMadExile

Claretta wrote:

The only thing that confuses me is what does the second set of times do in this part:

[]

While the 400ms after opacity affects the fade-in times, I can change the numbers after visibility to 10000ms with no actual effect, either in visibility or interactivity.

If you don't use visibility, as well as opacity, then the UI bar (and its contents) will still be interactive (they need to be hidden to be non-interactive, not simply invisible).  If you don't animate the visibility change (specifically, with step-end or the equivalent; the step-end function stays at the start state until the duration is complete then switches to the end state), then it will apply immediately, meaning the bar will simply disappear and not fade out.

Beyond that, changing the duration on the visibility animation does have an affect.  By your example, the UI bar (and its contents) will become transparent in 400ms due to the opacity animation, while the interactive elements will still be active (because they're not hidden yet) for 10000ms.  The durations should be the same for both.

You'll note there's no animation for visibility on the #ui-bar:not(.hide) ruleset (though I could have added one using step-start), which is because it would be pointless.  The UI bar needs to be visible immediately when it's supposed to be fading back in, so we can actually see it fading back in.

Basically, the animations work like so:

• Shown to hidden: fade to transparent, then hide
• Hidden to shown: show, then fade to opaque

Claretta wrote:

Note that my UI bar itself is set to be all transparent apart from the text links, so maybe it's applying to something already hidden.

I assume you mean its background, and that's irrelevant/separate to what we're doing here.  The above affects the UI bar as a whole, not simply its background.

Claretta

TheMadExile wrote:

Beyond that, changing the duration on the visibility animation does have an affect.  By your example, the UI bar (and its contents) will become transparent in 400ms due to the opacity animation, while the interactive elements will still be active (because they're not hidden yet) for 10000ms.  The durations should be the same for both.

Come to think of it I was examining the fadein interactivity, rather than the fadeout, so of course I didn't see any change. Redid my test to look at the right thing and I see what's happening now.

Thanks.