Unable to play multiple transition animations at once

Unity Engine
,
1

As you can see, only one visual element is in a transition at a time, when both of them should be transitioning simultaneously at the same time. Is there another way to do it?

sTDdErG7eJ7EFBpsBP

    void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        var ve1 = root.Q("ve1");
        var ve2 = root.Q("ve2");
        var ve1Button = root.Q("ve1_button");
        var ve2Button = root.Q("ve2_button");
       
        ve1Button.RegisterCallback<ClickEvent>(evt =>
        {
            ve1.AddToClassList("hidden");
            ve2.RemoveFromClassList("hidden");
        });
       
        ve2Button.RegisterCallback<ClickEvent>(evt =>
        {
            ve1.RemoveFromClassList("hidden");
            ve2.AddToClassList("hidden");
        });
    }

<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">
    <Style src="project://database/Assets/uss.uss?fileID=7433441132597879392&guid=e91a0f4f34c72b647a6402fc02f48bb6&type=3#uss" />
    <ui:VisualElement name="ve1" style="flex-grow: 1; position: absolute; width: 50%; height: 50%; background-color: rgba(255, 126, 126, 0.19); transition-duration: 1s; transition-timing-function: linear;">
        <ui:Button text="Button" name="ve1_button" />
    </ui:VisualElement>
    <ui:VisualElement name="ve2" class="hidden" style="flex-grow: 1; position: absolute; background-color: rgba(18, 34, 255, 0.43); width: 50%; height: 50%; transition-duration: 1s; bottom: 12px; transition-timing-function: linear;">
        <ui:Button text="Button" name="ve2_button" style="margin-top: 70px;" />
    </ui:VisualElement>
</ui:UXML>

.hidden {
    display: none;
    opacity: 0;
    translate: -35% 0;
}
2

I think the display property can’t be animated.

3

Oh so that’s why my transitions are so wonky, I thought it was a bug or something. Works as expected without display property in the hidden class. So whats the proper way to do this. I also need the visual element to be disabled when its hidden.

4

I would try listening for TransitionEndEvent and setting display there.

5

Setting Display.None at TransitionEndEvent works great when the transition is transitioning into the “hidden” state. But then when you want to play the “show” transition on the VisualElement you run into the same issue that I started this post with, since setting Display.Flex at the start of the transition messes it up.

I did make a kinda hacky solution especially for what should be a pretty simple hide/show animation. I “disable” the VisualElement that needs to be hidden by setting its PickingMode to PickingMode.Ignore and also all of its children.

Is there a better solution for this?

void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        var visualElement1 = root.Q("ve1");
        var visualElement2 = root.Q("ve2");
        var visualElement1_button = root.Q("ve1_button");
        var visualElement2_button = root.Q("ve2_button");
      
      
        void SetPickingModeRecursive(VisualElement parent, PickingMode pickingMode)
        {
            parent.pickingMode = pickingMode;
            foreach (var child in parent.Children())
            {
                child.pickingMode = pickingMode;
                SetPickingModeRecursive(child, pickingMode);
            }
        }
      
      
      
        //Visual element 1
        visualElement1_button.RegisterCallback<ClickEvent>(evt =>
        {
            visualElement1.AddToClassList("hidden");
            visualElement2.RemoveFromClassList("hidden");

            Debug.Log("Clicked Button 1");
        });
      
        visualElement1.RegisterCallback<TransitionEndEvent>(evt =>
        {
            if (visualElement1.ClassListContains("hidden") == true)
            {
                SetPickingModeRecursive(visualElement1, PickingMode.Ignore);
            }
        });
      
        visualElement1.RegisterCallback<TransitionStartEvent>(evt =>
        {
            if (visualElement1.ClassListContains("hidden") == false)
            {
                SetPickingModeRecursive(visualElement1, PickingMode.Position);
            }
        });


        //Visual element 2
        visualElement2_button.RegisterCallback<ClickEvent>(evt =>
        {
            visualElement1.RemoveFromClassList("hidden");
            visualElement2.AddToClassList("hidden");
          
            Debug.Log("Clicked Button 2");
        });
      
        visualElement2.RegisterCallback<TransitionEndEvent>(evt =>
        {
            if (visualElement2.ClassListContains("hidden") == true)
            {
                SetPickingModeRecursive(visualElement2, PickingMode.Ignore);
            }
        });
      
        visualElement2.RegisterCallback<TransitionStartEvent>(evt =>
        {
            if (visualElement2.ClassListContains("hidden") == false)
            {
                SetPickingModeRecursive(visualElement2, PickingMode.Position);
            }
        });

    }
6

Okey seems like you just need a container for the VisualElement’s and then you can set the containers Display property to Display.None or Display.Flex without it affecting the child’s transition.

void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        var visualElement1_container = root.Q("ve1_container");
        var visualElement2_container = root.Q("ve2_container");
        var visualElement1 = root.Q("ve1");
        var visualElement2 = root.Q("ve2");
        var visualElement1_button = root.Q("ve1_button");
        var visualElement2_button = root.Q("ve2_button");
       
       
        visualElement2_container.style.display = DisplayStyle.None;
       
        //Visual element 1
        visualElement1_button.RegisterCallback<ClickEvent>(evt =>
        {
            visualElement2_container.style.display = DisplayStyle.Flex;
           
            visualElement1.AddToClassList("hidden");
            visualElement2.RemoveFromClassList("hidden");
           
            Debug.Log("Clicked Button 1");
        });
       
        visualElement1.RegisterCallback<TransitionEndEvent>(evt =>
        {
            if (visualElement1.ClassListContains("hidden") == true)
            {
                visualElement1_container.style.display = DisplayStyle.None;
            }
        });


        //Visual element 2
        visualElement2_button.RegisterCallback<ClickEvent>(evt =>
        {
            visualElement1_container.style.display = DisplayStyle.Flex;
           
            visualElement2.AddToClassList("hidden");
            visualElement1.RemoveFromClassList("hidden");
           
            Debug.Log("Clicked Button 2");
        });
       
        visualElement2.RegisterCallback<TransitionEndEvent>(evt =>
        {
            if (visualElement2.ClassListContains("hidden") == true)
            {
                visualElement2_container.style.display = DisplayStyle.None;
            }
        });
    }
1 Like