Question Best way to trigger a UI Transition?

Hello,

So i am trying to animate a UI i made in UI Toolkit. Thus far i have been animating the UI by setting the style properties through script;

Code (CSharp):

1. StyleList<TimeValue> timeValues = new StyleList<TimeValue>();
2. timeValues.value = new List<TimeValue>();
3. timeValues.value.Add(new TimeValue(2f));
4. _rootVisualElement.Q<VisualElement>("Curtain").style.transitionDuration = timeValues;
5.  
6. _rootVisualElement.Q<VisualElement>("Curtain").style.backgroundColor = new StyleColor(new Color(0, 0, 0, 0));
7.  

Code like this usually works, triggers the transition over 2 secconds etc..

However, doing the exact same in other places gives inconsistent results. A log shows that the property insta changed into the destination value (while it should be interpolated over the transition time), but the result in the UI is as if nothing changed.

Is setting element properties as

style.myproperty = newValue

the proper way to enact a UI transition? Am i doing something else wrong?

 

Ok i apologise, this specificly apears to by my fault in incorectly chaining event triggers that happened to cancel the effect out.

Still curious if this would be the best way to go about it.

 

Generally I have only done transitions set up via USS styles. Most common way I activate them is with pseudo-selectors (hovering over a button to highlight it, for example), but otherwise I use

VisualElement.AddToClassList

and

VisualElement.RemoveFromClassList

to engage the transition.

And then you can register callbacks to know when the transitions have started/ended. Been very reliable for me.

 

Thanks