Why does this transition not animate when reverting back to the original value?

[andrewkdci]

I asked a question not too long ago, #15086, that was tangentially about asymmetric transitions, i.e. the transition is animated when it is applied, but then instantaneous when it's reverted back to it original value. Here is the basic XAML that I was playing with:

    <Border x:Name="PART_BORDER_MainContent"
            Grid.Column="1"
            Background="{DynamicResource Brush_LayerBackground}"
            Width="{Binding ElementName=PART_CONTROL_MainContent, Path=Width}"
            Classes.hasContent="{Binding HasContent}"
            IsVisible="True">
      <ContentControl x:Name="PART_CONTROL_MainContent"
                      Content="{Binding ActiveMenu}"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch"/>
      
      <Border.Styles>
        <Style Selector="Border">
          <Setter Property="RenderTransform" Value="translateX(528px)"/>
        </Style>
        <Style Selector="Border.hasContent">
          <Setter Property="RenderTransform" Value="translateX(0px)"/>
        </Style>
      </Border.Styles>
      
      <Border.Transitions>
        <Transitions>
          <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.5"/>
        </Transitions>
      </Border.Transitions>
      
    </Border>

(Note that IsVisible is always True, which was for testing purposes. Originally I had it bound to HasContent.)

And this is what it looks like in action:

This is great. It works how I want it to, namely that there is a smooth animation when the menu slides out from the right, and then an instantaneous transition when it slides back to the right.

What I don't understand is why the second transition, when it goes back to translateX(528px), is instantaneous? What in my XAML says "apply the transition animation to <Style Selector="Border.hasContent"> but not to the base <Style Selector="Border">?"

[andrewkdci]

Interesting. So if I change the range of the RenderTransform transition like so:

      <Border.Styles>
        <Style Selector="Border">
          <Setter Property="RenderTransform" Value="translateX(228px)"/>
        </Style>
        <Style Selector="Border.hasContent">
          <Setter Property="RenderTransform" Value="translateX(100px)"/>
        </Style>
      </Border.Styles>

then I get a very short transition that travels only from 228 to 100 px:

So, am I correct if I say that these two styles are like setting the To and From values on an animation in UWP/WinUI? e.g.

<DoubleAnimation Storyboard.TargetName="BorderRenderTransform" 
                 Storyboard.TargetProperty="X"
                 From="228"
                 To="100"
                 Duration="0:0:0.5"/>

Can anyone confirm this?