DoubleTransition animated until the end and then snaps back to original value in preview5

[llfab]

Describe the bug
DoubleTransition is correctly forward animated but after the animation is done the transitioned value snaps back to the original value.

To Reproduce
Load solution from here: https://github.com/llfab/Samples/tree/main/AvaloniaAnimationTest and run animation.

Code:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAnimationTest.MainWindow"
        Title="AvaloniaAnimationTest">
    <Window.Styles>
        <Style Selector="Panel.animGrid">
            <Setter Property="Transitions">
                <Transitions>
                    <DoubleTransition Property="Width" Duration="0:0:2.4" />
                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:2.4"/>
                </Transitions>
            </Setter>
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="RenderTransformOrigin" Value="0.0,0.0"/>
            <Setter Property="RenderTransform" Value="scaleX(1)"/>

            <Style Selector="^.large">
                <Setter Property="RenderTransform" Value="scaleX(3)" />
            </Style>
        </Style>
    </Window.Styles>
    <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
        <CheckBox x:Name="_useRenderTransformCheckBox" IsChecked="False">Use Render Transform</CheckBox>
        <ToggleButton Checked="OnChecked" Unchecked="OnUnchecked">Animation</ToggleButton>
        <Panel x:Name="_animGrid" Classes="animGrid" HorizontalAlignment="Left" Height="200">
          <TextBlock Text="Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Panel>
    </StackPanel>
</Window>

Code behind:

    ...
        private void OnChecked(object sender, RoutedEventArgs e)
        {
            if (!_useRenderTransformCheckBox.IsChecked.Value)
            {
                _animGrid.Width = 600;
            }
            else
            {
                _animGrid.Classes.Add("large");
            }
        }

        private void OnUnchecked(object sender, RoutedEventArgs e)
        {
            if (!_useRenderTransformCheckBox.IsChecked.Value)
            {
                _animGrid.Width = 200;
            }
            else
            {
                _animGrid.Classes.Remove("large");
            }
        }
    ...

Expected behavior
The animated panel should keep the final width (like in preview4)

Desktop (please complete the following information):

• OS: Windows 10
• Version [11.0.0-preview5]

Additional context
See videos attached to this issue

[llfab]

11.0.0-preview4:
https://user-images.githubusercontent.com/31031996/217296303-9f862647-f60a-466a-a50b-4182b0f8ca4d.mp4

[llfab]

11.0.0-preview5:
https://user-images.githubusercontent.com/31031996/217296467-8debbaa6-64cd-4cd4-a7c4-102db200cae4.mp4

[llfab]

Ok. I played a bit and it turned out that the Width-Setter is the problem. If you change the Xaml to

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAnimationTest.MainWindow"
        Title="AvaloniaAnimationTest">
    <Window.Styles>
        <Style Selector="Panel.animGrid">
            <Setter Property="Transitions">
                <Transitions>
                    <DoubleTransition Property="Width" Duration="0:0:2.4" />
                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:2.4"/>
                </Transitions>
            </Setter>
            <Setter Property="Background" Value="Green"/>
            <!--<Setter Property="Width" Value="200"/>-->
            <Setter Property="RenderTransformOrigin" Value="0.0,0.0"/>
            <Setter Property="RenderTransform" Value="scaleX(1)"/>

            <Style Selector="^.large">
                <Setter Property="RenderTransform" Value="scaleX(3)" />
            </Style>
        </Style>
    </Window.Styles>
    <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
        <CheckBox x:Name="_useRenderTransformCheckBox" IsChecked="False">Use Render Transform</CheckBox>
        <ToggleButton Checked="OnChecked" Unchecked="OnUnchecked">Animation</ToggleButton>
        <Panel x:Name="_animGrid" Width="200" Classes="animGrid" HorizontalAlignment="Left" Height="200">
          <TextBlock Text="Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Panel>
    </StackPanel>
</Window>

it works

[llfab]

[llfab]

Is this an intended change between preview4 and preview5?

[maxkatz6]

I think your fixed code previously (in 0.10) wouldn't work. And it is expected to work in 11.0 afaik.
Old code, on other hand, should also work as expected.

Potentially a regression from new value store system. cc @grokys