Quick Transition Tutorial!

Here is a small tutorial detailing how to achieve a transition from scratch!

1. Create the documents:

You can create uss/uxml and a c# window using the menu item in the project.
The window will automatically open at the end, or else you can open manually with the menu item in Window->UI Toolkit


2. Add a selector and a transition




You can open in the UI Builder the UXML that was just created by double-clicking on it.
Once in the UI Builder, create a new selector so that we apply a new style when the mouse is over the label with

Label:hover

. This is really generic because it will apply to every label, so you could do something more specific as a selector.
In that selector, you can modify a few properties, and activate the transition at the bottom by setting a duration other than 0 and specify on witch transition it applies


3. Enjoy!
For those wondering why there was a third label, it was created in the c# file and the stylesheet was not applied on it. I simply opened the file and removed the line creating the extra label.






If you are really attentive, you can see that there is a transition when you put your mouse over the label, but the style just "snap" when you remove your mouse. This is because the transition property is added with the

Label:hover

selector. I did this to show the order in which the style is applied. We start by resolving the transition style, and then we look if there is any transition that need to be done. So if the transition is removed at the same time as other properties, there won't be any animation on these properties.

To obtain a transition on both the "mouse start hovering" and "mouse stop hovering" the transition property should be set in a selector that do not change, in this case it could be on every Label. You have seen how to create a selector, so as homework, try to create this second selector with the transform. You can remove the style from the first selector by using a right click on it and select the unset option.

Let us know if you have any questions!

 

They are going through the regular events in UI toolkit

Code (CSharp):

1. ve.RegisterCallback<TransitionRunEvent>(evt => elapsedTime = (float)evt.elapsedTime);
2. ve.RegisterCallback<TransitionStartEvent>(evt => elapsedTime = (float)evt.elapsedTime);

You can find more info in the API documentation for Unity 2021.2+ :

TransitionEndEvent
TransitionCancelEvent
TransitionStartEvent
TransitionRunEvent

It depends on exactly what drives your animation. If it needs to be linked to your game state, I would probably not use the experimental animation, but if they are standalone UI animation, most of the time you could use the USS transition (fade, slide, expand) but if you need something more specific, then yes the experimental animation framework is always there.

Transition are easy to setup from C# :

Code (CSharp):

1.             ve.style.backgroundColor = Color.green;
2.             ve.style.transitionProperty = new List<StylePropertyName> { new StylePropertyName("background-color") };
3.             ve.style.transitionDuration = new StyleList<TimeValue>(new List<TimeValue> { new TimeValue(1.0f, TimeUnit.Second) })

Then you could trigger the transition by changing it on the next frame as Julia explains here

 

@Chris-Trueman Can you file a bug in the editor with a small repro project? This that would give us a starting point to reproduce the exact situation that you are encountering. I have not been able to get something similar on my side.