Why does Transition not work?

[kyuranger]

I asked a similar question before, but no one answered it maybe because my code was too complicated.:#13946

I have been studying this these days, and I used the simplest code to reappear this problem. Now I can restore the problem, but I am not sure whether it is a problem with my code or a bug in Avalonia. So, I have to put it up for everyone to help.

XAML：

<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="AvaloniaApplication2.MainWindow"
        Title="AvaloniaApplication2">
	<Grid RowDefinitions="auto,*">
		<Button Name="B">Test</Button>
		<Border Width="100" Height="100" Background="Red" Name="border">			
			<Border.Transitions>
				<Transitions>
					<TransformOperationsTransition Property="RenderTransform" Duration="0:0:1"/>
				</Transitions>
			</Border.Transitions>
		</Border>
	</Grid>
</Window>

Code-behind:

using Avalonia.Controls;
using Avalonia.Media;
using System;

namespace AvaloniaApplication2
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            B.Click += B_Click;
        }

        private void B_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
        {
            Random R = new Random(DateTime.Now.Millisecond);
            border.RenderTransform = new TranslateTransform(0, R.Next(100,500));            
        }
    }
}

As you see, every time I click the button, the border resets the TranslateTransform to 0,0 and then jumps directly to the target value without any animation at all.

No matter if I change TranslateTransform to RotateTransform or ScaleTransform, the problem still exists.For example:
border.RenderTransform = new RotateTransform(R.Next(0,360));
or
border.RenderTransform = new ScaleTransform(1, R.Next(1, 5));

What's wrong with it?

The version of Avalonia I am using is 11.0.6.
Windows version is Windows 10 22H2 19045.3803

[maxkatz6]

It needs an initial transform to be set. Something like RenderTransform="none". If I am wrong, it might depend on the version, but I don't remember exactly.

[kyuranger]

I modified my XAML like this:

<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="AvaloniaApplication3.MainWindow"
        Title="AvaloniaApplication3">
    <Grid RowDefinitions="auto,*">
		<Button Name="B">Test</Button>
		<Border Width="100" Height="100" Background="Red" Name="border">			
			<Border.Transitions>
				<Transitions>
					<TransformOperationsTransition Property="RenderTransform" Duration="0:0:1"/>
				</Transitions>
			</Border.Transitions>
			<Border.RenderTransform>
				<TranslateTransform X="0" Y="0"></TranslateTransform>
			</Border.RenderTransform>
		</Border>
	</Grid>
</Window>

However, the problem is still here.

[andrewkdci]

Per this Avalonia article, How to Use Transitions, you can't transition a RenderTransform directly. Instead, you need to use TranformOperations.Parse(...).

I was able to get your original code to work by changing this one line in B_Click:

    private void B_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
    {
        Random R = new Random(DateTime.Now.Millisecond);
        border.RenderTransform = TransformOperations.Parse($"translateY({R.Next(100, 500)}px)");
    }

[kyuranger]

Thanks a lot.