Как реализовать анимацию роутера в Blazor?

Question

Мне нужна анимация при переходе между страницами в Blazor

Как реализовать анимацию маршрутизатора в приложении Blazor?

Answer 1

В настоящее время такая функция не поддерживается в Blazor. Система Router в Blazor предоставляет очень ограниченную функциональность по сравнению, скажем, с Angular. Потерпи. Приближается. Тем временем вы можете реализовать анимацию маршрутизатора, создав собственную систему маршрутизатора. Смотрите статьи Криса Сэйнти, как это сделать. Это ... и , которые ...

Надеюсь, это поможет ...

Answer 2

У меня есть пакет Nuget с именем DataJuggler.Blazor.Components, и один из двух компонентов в нем до сих пор называется 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

Он просто устанавливает несколько свойств, с которыми все вы будете разговаривать от своего родителя к ребенку, и наоборот.

Мой пример проекта использует BlazorStyled от Chanan, что позволяет мне динамически измените значения CSS, чтобы обновить значение XPosition для каждого спрайта (я показываю гонку из двух машин в качестве демонстрации)

Компоненты спрайта содержат таймер, поэтому вы можете запустить спрайт, вызвав:

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

Есть свойство Interval, поэтому установите для него ту скорость, которая лучше всего подходит для вас.

У меня запущен еще один проект под названием BlazorAnimation, но я могу одновременно работать только с 7 или 8 проектами.