How to make a IMGUI FadeGroup in UIElements

FadeGroupExample.cs

using UnityEditor;
using UnityEngine.UIElements;
using UnityEngine.UIElements.Experimental;

public class FadeGroupExample : EditorWindow
{
    ValueAnimation<StyleValues> m_FoldoutAnimation;
    VisualElement m_FadeGroup;
    int m_AnimationTime = 500;

    [MenuItem("UI/Fade Group")]
    static void ShowWindow()
    {
        FadeGroupExample window = (FadeGroupExample)EditorWindow.GetWindow(typeof(FadeGroupExample));
        window.Show();
    }

    void OnEnable()
    {
        var fadeGroupToggle = new Toggle(){ value = true };
        rootVisualElement.Add(fadeGroupToggle);

        m_FadeGroup = new VisualElement() { style = { overflow = Overflow.Hidden }};
        m_FadeGroup.Add(new Label("Label 1"));
        m_FadeGroup.Add(new Label("Label 2"));
        m_FadeGroup.Add(new Label("Label 3"));
        m_FadeGroup.Add(new Label("Label 4"));
        rootVisualElement.Add(m_FadeGroup);

        fadeGroupToggle.RegisterValueChangedCallback(FadeGroupValueChanges);
        rootVisualElement.Add(new Label("Label 5"));
    }
    
    void FadeGroupValueChanges(ChangeEvent<bool> evt)
    {
        m_FadeGroup.visible = true;
        
        // Stop any old animations
        if (m_FoldoutAnimation != null)
        {
            //m_FoldoutAnimation.Stop();
            m_FoldoutAnimation.Recycle();
            m_FoldoutAnimation = null;
        }

        if (evt.newValue)
        {
            // For us to expand we first need to know how height we should be.
            // So we set the height to auto and then wait for the GeometryChangedEvent to tell us the correct height.
            m_FadeGroup.style.height = StyleKeyword.Auto;
            m_FadeGroup.RegisterCallback<GeometryChangedEvent>(OnGeometryChangedEvent);
        }
        else
        {
            // To shrink we just take the current height and animate to 0.
            m_FoldoutAnimation = m_FadeGroup.experimental.animation.Start(new StyleValues { height = m_FadeGroup.layout.height }, new StyleValues { height = 0 }, m_AnimationTime);
            m_FoldoutAnimation.onAnimationCompleted += () => m_FadeGroup.visible = false;
            m_FoldoutAnimation.KeepAlive(); // Prevent it being reused when the animation is finished else an error may be thrown when we try to check if it has finished.
        }
    }

    void OnGeometryChangedEvent(GeometryChangedEvent evt)
    {
        // We need to wait for this callback so that we know what the height of the group should be.
        m_FoldoutAnimation = m_FadeGroup.experimental.animation.Start(new StyleValues { height = evt.oldRect.height}, new StyleValues { height = evt.newRect.height }, m_AnimationTime);
        
        // We need to set the value back or it will now be a fixed height.
        m_FoldoutAnimation.onAnimationCompleted += () => m_FadeGroup.style.height = StyleKeyword.Auto;
        
        //we apply the start value right now
        m_FadeGroup.style.height = evt.oldRect.height;
        
        m_FoldoutAnimation.KeepAlive(); // Prevent it being reused when the animation is finished else an error may be thrown when we try to check if it has finished.
        m_FadeGroup.UnregisterCallback<GeometryChangedEvent>(OnGeometryChangedEvent);
    }
}

This is exactly what I was hoping to find. Huge thanks for sharing. 👍