使用Xaml故事板尝试同时淡入一个元素并淡入另一个元素时遇到错误

我希望最终确定应用程序的外观，并且很难将过渡动画应用于一个非常基本的问题。

附件中，您可以找到我正在苦苦挣扎的代码。我已经注释掉了开发人员和原型开发人员在使用的设置程序。它们按照我的期望工作。

情节提要过渡不能以任何形式起作用。只要我没有任何运行时错误，就只添加一个故事板过渡与所有或任何二传手“结合”，就可以了，但是过渡根本没有出现。

我想知道我是否可能不是完全误解情节提要板的工作原理。

我得到的错误是：

 Multiple animations in the same containing Storyboard cannot target the same property on a single element.

这是简化的代码：

<Grid>
<VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="StateA">
                <!--<VisualState.Setters>
                    <Setter Target="FirstElement.Visibility" Value="Visible" />
                    <Setter Target="SecondElement.Visibility" Value="Collapsed" />
                </VisualState.Setters>-->
                <Storyboard>
                    <PopOutThemeAnimation TargetName="SecondElement"/>
                    <PopInThemeAnimation TargetName="FirstElement"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="StateB">
                <!-- <VisualState.Setters>
                    <Setter Target="FirstElement.Visibility" Value="Collapsed" />
                    <Setter Target="SecondElement.Visibility" Value="Visible" />
                </VisualState.Setters>-->
                <Storyboard>
                    <PopOutThemeAnimation TargetName="FirstElement"/>
                    <PopInThemeAnimation TargetName="SecondElement"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Rectangle Name="FirstElement"
               Fill="Blue"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Width="200"
               Height="200" 
               DoubleTapped="GoToStateB" />

    <Rectangle Name="SecondElement"
               Fill="Red"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Width="200"
               Height="200" 
               DoubleTapped="GoToStateA" />
</Grid>

后面带有以下简单代码：

 private void GoToStateA(object sender, DoubleTappedRoutedEventArgs e)
    {
        // do something
        VisualStateManager.GoToState(this, "StateA", true);
    }
    private void GoToStateB(object sender, DoubleTappedRoutedEventArgs e)
    {
        // do something else
        VisualStateManager.GoToState(this, "StateB", true);
    }

编辑：JustinXL指出的“解决方案”是，以下Xaml元素需要删除，并且运行时错误消失：

            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>

我还不清楚为什么会是这种情况（真正的错误或只是一个晦涩的设计陷阱）。