如何在Blazor中实现路由器动画？

Question

我希望在Blazor中的页面之间导航时有一些动画

如何在Blazor应用程序中实现路由器动画？

Answer 1

目前Blazor还不支持这样的功能。Blazor中的路由器系统提供的功能与Angular相比非常有限。耐心点。它来了。同时，您可以通过创建自己的自定义路由器系统来实现路由器动画。请参阅chris sainty的文章how to do。This...和that...

希望这能帮到你。

Answer 2

我在https://github.com/JByfordRew/BlazorTransitionableRoute上创建了这个存储库和nuget包就是为了做到这一点

这是“它是如何工作的”部分

“有两个视图布局意味着我们可以记住以前的路线，但我们不能简单地覆盖它们，必须保留它们，这样我们就不会丢失滚动位置等浏览器状态。这个解决方案处理路线视图，并知道何时调用您提供给它的转换实现。它也适用于浏览器导航按钮。如果您需要在应用程序中处理返回按钮，则使用jsInterop调用本机返回，即window.history.back()；这是我能得到的最简单的解决方案。如果有其他更简单的解决方案，请让我知道。”

Answer 3

我有一个名为DataJuggler.Blazor.Components的Nuget包，到目前为止，其中的两个组件之一称为雪碧包。

以下是包含示例项目的源代码：

https://github.com/DataJuggler/DataJuggler.Blazor.Components

以下是一段视频：

https://youtu.be/frtetHgfdIo

下面是使用该组件的示例

@使用DataJuggler.Blazor.Components

<Sprite ImageUrl="../images/WhiteCar.png" Name="WhiteCar" Position="fixed"
    Height="30" Subscriber=this Width="96" ZIndex="10" 
    XPosition="@WhiteCarPosition" YPosition="@WhiteCarY"
    Scale="1.4">
</Sprite>

如果您查看显示接口部分，则父页面或组件必须是实现接口DataJuggler.Blazor.Components.Interfaces.ISpriteSubscriber

它只设置了几个属性，让你可以从父母到孩子，反之亦然。

我的示例项目使用Chanan的BlazorStyled，它允许我动态更改CSS值以更新每个Sprite的XPosition值(我展示了一个两辆车的比赛作为演示)

sprite组件包含一个计时器，因此可以通过调用以下命令来启动Sprite：

// I only start 1 timer, and I handle both cars movement on each Timer tick.
redCar.Start();

Interval有一个属性，因此请将其设置为最适合您的速度。

我已经开始了另一个名为BlazorAnimation的项目，但我一次只能处理7到8个项目。

​

​