Question Transition when VisualElement changes size not working?

Hey,

I have a VisualElement with a 1s transition on "all" properties.

I then change the children of the element, which causes the element to change size to fit the children. I'm hoping to obtain the effect that the parent element transitions smoothly in size as the child elements change, but it seems to not transition :/

I double checked the transition settings by tweaking opacity, which works as expected. I'm assuming this might be because height/width is always set to "auto", and it's just the computed style, not the actual width/height, that's getting changed.

Would love any thoughts people have in this space...

 

Thanks Simon!

So my setup is:

Parent visualelement: transition: 0.5s
-- child visualelement (which I then change around the children of): transition: 0.5s

Even with both of those set to 0.5s, I'm not seeing any transition :/ Any ideas?

 

Hey!

Sorry for the delay replying. Yes, the child container is set to all: 0.5s, as is the parent VE, there's two other children off the parent as well and they both have all: 0.5s transitions. However, when I add/remove VEs to that child container (it's a floating tutorial window with varying instructions, and I'm hoping to have the window smoothly expand/contract) it just instantly changes size.

 

Thanks Simon for the help here! This is my .uxml:

<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">

    <ui:VisualElement class="panel" style="max-width: 600px; transition-duration: 0.5s; transition-property: height; opacity: 1;">

        <ui:VisualElement style="flex-direction: row; transition-duration: 0.5s;">

            <ui:Label text="Tutorial Sample Title" display-tooltip-when-elided="true" name="tutorial-title" class="stat-text" style="transition-duration: 0.5s; flex-grow: 1;" />

            <ui:VisualElement name="tutorial-close" class="hover-tint-orange" style="background-image: resource(&apos;textures/icons/close_FILL0_wght700_GRAD0_opsz48&apos;); width: 40px; height: 40px; flex-grow: 0; flex-shrink: 0; -unity-background-scale-mode: scale-to-fit;" />

        </ui:VisualElement>

        <ui:VisualElement name="tutorial-step-container" style="display: flex; height: auto; transition-duration: 0.5s; transition-property: height;" />

        <ui:VisualElement style="padding-top: 10px; align-items: flex-end; transition-duration: 0.5s;">

            <ui:Button text="Next" display-tooltip-when-elided="true" focusable="false" name="next-button" class="cs-button" style="align-items: flex-start; flex-direction: row;" />

        </ui:VisualElement>

    </ui:VisualElement>

</ui:UXML>

And here's the relevant part of C# where I manipulate the view:

Code (CSharp):

1.         private void ProcessNextStep()
2.         {          
3.             if (StepEnumerator.MoveNext())
4.             {
5.                 TutorialStep step = new();
6.  
7.                 ActiveStep = StepEnumerator.Current;
8.                 step.SetStep(ActiveStep, StepCompleted);
9.  
10.                 this.Q<VisualElement>("tutorial-step-container").Clear();
11.                 this.Q<VisualElement>("tutorial-step-container").Add(step);
12.  
13.             }
14.             else
15.             {
16.                 // Tutorial is complete. Close the tutorial window.
17.                 this.RemoveFromHierarchy();
18.             }
19.         }

Still seeing instantaneous transitions, rather than a smooth size change :/ Any ideas?

 

Ah, thanks for that clarification. I will think a bit about how to cleverly work around that. Thanks for the replies!

 

Hi I've got the same problem here, may I ask whether you figured out this?