SplitView animation rework roadblock

[amwx]

I've been looking at reworking the SplitView animations to use transforms and clips similar to how its done in WinUI. Currently it transitions on the Width property, but that leads to multiple layout passes and can cause stutters/less smooth animation in heaver UIs. I've solved some of the issues like the lack of geometry based transitions, which prevents animating a clip on the SplitView's pane, which wasn't too hard. Where I'm really hitting a roadblock though, is getting the animations to work properly. In UWP's VisualStateManager, there are VisualTransitions that animate & run BEFORE the visual state applies. In Avalonia, transitions & animations run at the same time a pseudoclass/class is applied and there's no concept of 'transitioning' (not to be confused with transitions as we already have them).

As an example, this is WinUI's transition from OpenCompactOverlayLeft to ClosedCompactLeft

<VisualTransition From="OpenCompactOverlayLeft" To="ClosedCompactLeft">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1" Storyboard.TargetProperty="Width">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(Grid.Column)">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(Grid.ColumnSpan)">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer" Storyboard.TargetProperty="Opacity">
            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
            <SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="0.0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</VisualTransition>

And this is the VisualState that applies when ClosedCompactLeft is applied:

<VisualState x:Name="ClosedCompactLeft">
    <VisualState.Setters>
        <Setter Target="ColumnDefinition1.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
        <Setter Target="ContentRoot.Grid.Column" Value="1" />
        <Setter Target="ContentRoot.Grid.ColumnSpan" Value="1" />
        <Setter Target="PaneRoot.Visibility" Value="Visible" />
        <Setter Target="PaneClipRectangleTransform.TranslateX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
    </VisualState.Setters>
</VisualState>

Notice how they change the Grid properties. What happens is a translation animation occurs in the transition (via RenderTransform) that make it look like the content is changing Grid.Column gracefully, while the pane animates it clip to close the SplitView. When the transition finishes, the grid column is set, the pane is properly clipped, and its a seamless transition.

In Avalonia, this isn't possible to accomplish. Trying to do:

<Style Selector="SplitView:closed:compact:left /template/ Panel#ContentRoot">
    <Style.Animation>
        ...RenderTransform Animation...
    </Style.Animation>

    <Setter Property="Grid.Column" Value="0" />
</Style>

Will set the Grid Column to 0 and run the animation at the same time.

I also tried using an animation entirely, including setting the Grid.Column in the last Keyframe. While this technically works in terms of animating and setting the Column correctly, it fails because the value reverts after the animation. Using FillMode='Forward' isn't a solution either as the final values get written with LocalValue priority and doesn't get removed when the pseudoclass is removed. This I think is actually a bug, as removing the pseudoclass should remove the animation values, but I'm not sure how that should be handled/how complicated that would be to fix (but that's a separate issue).

So to properly handle this, we need a way to trigger & complete animations before as pseudoclass/class is applied, that can feature a more complex transition into a visual state. Technically one could use another pseudoclass to trigger the transition state, but feels like a bad design and also would require a hardcoded/known animation length which would have to be awaited before applying the actual pseudoclass. I'm not really sure what the best approach to this is though. Since Avalonia's animations are based more from CSS rather than WPF, does CSS have such a mechanism that could be adapted?

One possible solution may be a :before() selector, something like, but I don't know if that makes much sense outside of Animations and requires a separate selector (although verbosity isn't particularly important)

<Style Selector="Control:before(:pseudoclass) /template/ Panel">
    ....
</Style>