Best way in WinUI 3 to achieve fade out/in transition in a content control

[aries-zhang]

Hi I have an example app as follow. It loads GreenContent and BlueContent in the ContentControl when the and are clicked respectively.

Wondering what is the best way to animate the transition when the content is updated? e.g. current ContentControl has BlueContent, when GreenContent is assigned, fade out the old value BlueContent and fade in the GreenContent, and vice vesa.

There are transition animations such as PaneThemeTransition but there is no such for fade in/out effects. Also it seems PaneThemeTransition only works once, any content updates thereafter do not seem to trigger the animation. 

<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="Demo2.RootView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="GreenViewModel">
            <local:GreenContent/>
        </DataTemplate>
        <DataTemplate x:Key="BlueViewModel">
            <local:BlueContent/>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button x:Name="LoadGreenButton" Click="LoadGreenButton_Click">Go to green page</Button>
            <Button x:Name="LoadBlueButton" Click="LoadBlueButton_Click">Go to blue page</Button>
        </StackPanel>
        <ContentControl Grid.Row="1" Content="{x:Bind ViewModel.ContentViewModel, Mode=OneWay}"
                              HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                              ContentTemplateSelector="{StaticResource AutoDataTemplateSelector}" >
	        <ContentControl.Transitions>
                      <TransitionCollection>
                          <EntranceThemeTransition />
                      </TransitionCollection>
	        </ContentControl.Transitions>
        </ContentControl>
    </Grid>
</UserControl>