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

【问题标题】：How to implement router animation in Blazor?如何在 Blazor 中实现路由器动画？
【发布时间】：2020-05-31 18:39:12
【问题描述】：

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

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

【问题讨论】：

考虑查看在 github.com/JByfordRew/BlazorTransitionableRoute 处设计的 repo 和包。

标签： c# blazor blazor-server-side blazor-client-side

【解决方案1】：

我在 https://github.com/JByfordRew/BlazorTransitionableRoute 创建了这个 repo 和 nuget 包来做到这一点

这是“工作原理”部分

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

【讨论】：

【解决方案2】：

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

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

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>

如果您查看说 Subscriber=this 的部分，您的父页面或组件必须实现接口 DataJuggler.Blazor.Components.Interfaces.ISpriteSubscriber

它只是设置了一些属性，你可以从你的父母对孩子说，反之亦然。

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

精灵组件包含一个定时器，所以你可以通过调用来启动一个精灵：

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

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

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

【讨论】：

谢谢，我找到了 github.com/mikoskinen/Blazor.Animate 的仓库，但我不能使用此功能进行动画路由。我的目标是实现路由动画
我不明白路由动画是什么意思。您想在页面更改时显示一些内容吗？
我刚刚了解了什么是路由动画，但是您可以使用 BlazorStyled 来做到这一点，您必须自己处理路由：这是关于 Blazor 路由的文档：docs.microsoft.com/en-us/aspnet/core/blazor/…

【解决方案3】：

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

希望这会有所帮助...

【讨论】：