Question How to transition

I can't figure out how to trigger a transition of a different visual element. Like, fly in some sub-menu on a click ob a button.
There don't seem to be many tutorials for transition animations. Can anyone point me to some?

 

The transition is placed on the object you want to see animated,
then in code you change the values that have transitions assigned either manually or with classes.

Code (csharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
2.     <ui:Button name="btn_go" text="Go!" />
3.     <ui:VisualElement name="a_box" style="background-color: green; width: 100px; height: 100px; transition-property: scale, background-color; transition-duration: 1s, 0.5s;" />
4. </ui:UXML>

Code (csharp):

1.  
2. private void Start()
3. {
4.     var root = GetComponent<UIDocument>().rootVisualElement;
5.     var btn_go = root.Q<Button>("btn_go");
6.     var a_box = root.Q("a_box");
7.  
8.     root.Q<Button>("btn_go").clicked += () =>
9.     {
10.         a_box.style.scale = new Scale(Vector3.one * 2.0f);
11.         a_box.style.backgroundColor = Color.red;
12.         // this can also be done with classes, e.g. a_box.AddToClassList("some_class");
13.     };
14.  
15.     a_box.RegisterCallback<TransitionEndEvent>(e =>
16.     {
17.         // once scale has finished animating, return to starting state
18.         if (e.stylePropertyNames.Contains("scale") && a_box.style.scale != StyleKeyword.Null)
19.         {
20.             a_box.style.scale = StyleKeyword.Null;
21.             a_box.style.backgroundColor = Color.green;
22.         }
23.  
24.         // this can also be done with classes, e.g.
25.         // if(e.stylePropertyNames.Contains("scale"))
26.         //   a_box.RemoveFromClassList("some_class");
27.     });
28. }

 

OK thanks!
Basically the magic happens with .AddToClassList().
My problem now is, when I add a style with transition to root element, the effect is instant.
The transition doesn't play out.
Any Ideas?

 

If changes are applied during construction, the layout engine assumes it's part of setup and ignores the transition, I think.

Try delaying it with the VisualElement.schedule interface.

Code (csharp):

1. elem.schedule.Execute(() => elem.style.backgroundColor = Color.red).StartingIn(100);

 

Thanks for the hint. I ended up invoking the initial addition of the transition USS.
Can I set this thread to solved somewhere?