Container Animation out of sync with Children

[phollyer]

I have a form with a Border, such that form errors are animated into view under their respective field.

The problem I'm seeing is that as the height of the form increases, so does the Border height, but the Border animation runs after its containing form.

https://github.com/adospace/reactorui-maui/assets/189019/60e189ad-d0e2-4b0b-ab48-d5b9dd66a543

public override VisualNode Render()
    {
        return new Border()
        {
            new VerticalStackLayout()
            {
                new Label("Link This Device")
                    .HCenter()
                    .FontSize(30)
                    ,

                new Label("If you have already created an account, you just need to sign in here, and link this device.")
                    .LineBreakMode(LineBreakMode.WordWrap)
                    .FontSize(18)
                    ,

                _emailAddress,

                _password,

                _deviceName,

                new ButtonX()
                    .Text("Sign In and Link this Device")
                    .OnClicked(LinkDevice)
                    .IsBusy(_isBusy)
            }
            .Spacing(20)
            .WithAnimation()
        }
        .BackgroundColor(Colors.LightBlue)
        .Padding(10)
        .Shadow(new Shadow()
                .Brush(Colors.Black)
                .Offset(0, 0)
                .Radius(5)
                .Opacity(0.5f)
                )
        .Stroke(Colors.Blue)
        .StrokeThickness(2)
        .StrokeShape(new RoundRectangle().CornerRadius(10))
        .WithAnimation()
        ;

    }

Am I approaching this wrong?

Thanks

[phollyer]

Maybe it's an Apple 'thing', seems OK on Android, haven't tested on Windows or Tizen - Mac and IOS both behave the same.

[adospace]

I see, I think the problem is that the animation of the VStack indirectly affects the animation of the outer border: it's hard to keep in sync both, and much depends on how the layout system is quick enough to propagate the adjustments through the controls tree.

My suggestions: 1) Try removing the border animation, I don't think it's required as it should accommodate the VStack when increases in height. 2) Try to allocate enough space for the error messages initially so that VStack does not increase in height 3) General speaking try to use the TranslateX/Y properties to move objects around: they do not require layout passes resulting in smoother animations

[phollyer]

Thanks, I'll look into your suggestions.