What is the recommended way to do screen fade ins and out? I tried to do it using pseudo classes but I could not find a pseudo class that corresponded to when the screen is made active or inactive.
I was going to use it doing c#, but I am trying to figure out how to access the background color of the screen - a visual element - in code, how to change it, and if that method is performant.
Here’s one way I’m guessing it could be done via script to transition the screen from on layout to another. Assume your top level VisualElement in the layout is called “Container” on both the layouts.
But, let me know what you come up with.
FYI - I’m just learning this UI Toolkit now. There is a great course on Udemy from David Makowski that covers all the basics. I highly recommend it! You can find a link to it with a discount from his youtube channel called MadCat tutorials.
Thanks. Your approach definitely seems like it would work. Also thanks for the reference to the Udemy course. My only question is that one of the Unity Devs said that doing it through USS and UXML is more performant and the recommended way to do it. Nonetheless, I will definitely keep this method in mind. I will also report back on any solution I find.
Have an element with the uss class .container. The code just adds a class OnEnable. This is what I meant earlier. And it should be what you’re referring to in regards to using UXML/USS.
{
void OnEnable() {
// Need to wait for creation before animating stuff
doc.rootVisualElement.RegisterCallback<GeometryChangedEvent>(_ => doc.rootVisualElement.Q("container").AddToClassList("fade-in"));
}
}
Okay, I diddn’t know about transitions. That works pretty well. So if I want to toggle fade out and fade in, (and I’m not doing anything to change the layout) I’m doing this:
That was going to be my advice as well. I wonder if having that code amounts to being inline property applied and overriding the classes? Maybe make sure to comment out that code.
I just happened to be reviewing selector precedence in that Udemy course and these are my notes:
Selector Precedence
The Type selector has lowest precedence because there will likely be many elements with the same type (such as all VisualElements or all Labels or all Buttons, ect.)
The Class selector has a higher precedence than the Type selector because you can of course have multiple elements with the same class.
The Id selector has a higher precedence than the Class selector because its unlikely that you will name many elements with the same name. (Recommended to avoid naming multiple elements with the same name)
Style properties applied to the element itself are called Inline style properties and will override all other properties, so it has the highest precedence.
I only write the code to setup styles after I used AddToClassList and RemoveFromClassList with no result though. So that’s what I’m currently use, kinda happy with it. Since the use case code is simpler: just set opacity. But this of course does not account to more complex styles.