{"id":13807799,"url":"https://github.com/JByfordRew/BlazorTransitionableRoute","last_synced_at":"2025-05-14T00:32:07.644Z","repository":{"id":54513952,"uuid":"285844628","full_name":"JByfordRew/BlazorTransitionableRoute","owner":"JByfordRew","description":"Allows current and previous route to exist enabling page transition animations.","archived":false,"fork":false,"pushed_at":"2022-04-04T18:13:17.000Z","size":7316,"stargazers_count":174,"open_issues_count":2,"forks_count":17,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-16T01:50:27.379Z","etag":null,"topics":["blazor","navigation","transition","transitions"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JByfordRew.png","metadata":{"files":{"readme":"README-EXAMPLE.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-07T14:10:16.000Z","updated_at":"2025-02-24T11:04:55.000Z","dependencies_parsed_at":"2022-08-13T18:20:35.692Z","dependency_job_id":null,"html_url":"https://github.com/JByfordRew/BlazorTransitionableRoute","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JByfordRew%2FBlazorTransitionableRoute","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JByfordRew%2FBlazorTransitionableRoute/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JByfordRew%2FBlazorTransitionableRoute/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JByfordRew%2FBlazorTransitionableRoute/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JByfordRew","download_url":"https://codeload.github.com/JByfordRew/BlazorTransitionableRoute/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046407,"owners_count":22005588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","navigation","transition","transitions"],"created_at":"2024-08-04T01:01:30.543Z","updated_at":"2025-05-14T00:32:02.630Z","avatar_url":"https://github.com/JByfordRew.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"# Demo Documentation\n\n### A change to routing approach\n\nModify the App.razor file to take advantage of the transitionable route layouts and view.  This means moving the `MainLayout` to be more explicit in the app router and providing a more container like `MyViewLayout` as the default layouts. You can see below the simple use of primary and secondary route views. The `TransitionableRoutePrimary / Secondary` modify the `RouteData` passed to each inner `TransitionableRouteView` based on the active state, which is swapped after each navigation to preserve component instances.\n```html\n\u003cRouter AppAssembly=\"@typeof(Program).Assembly\"\u003e\n    \u003cFound Context=\"routeData\"\u003e\n        \u003cLayoutView Layout=\"@typeof(MainLayout)\"\u003e\n            \u003cTransitionableRoutePrimary RouteData=\"@routeData\" ForgetStateOnTransition=\"false\"\u003e\n                \u003cTransitionableRouteView DefaultLayout=\"@typeof(MyViewLayout)\" /\u003e\n            \u003c/TransitionableRoutePrimary\u003e\n            \u003cTransitionableRouteSecondary RouteData=\"@routeData\" ForgetStateOnTransition=\"false\"\u003e\n                \u003cTransitionableRouteView DefaultLayout=\"@typeof(MyViewLayout)\" /\u003e\n            \u003c/TransitionableRouteSecondary\u003e\n        \u003c/LayoutView\u003e\n    \u003c/Found\u003e\n    \u003cNotFound\u003e\n        \u003cLayoutView Layout=\"@typeof(MainLayout)\"\u003e\n            \u003cp\u003eSorry, there's nothing at this address.\u003c/p\u003e\n        \u003c/LayoutView\u003e\n    \u003c/NotFound\u003e\n\u003c/Router\u003e\n```\n\n### Example usage\n\nYou will need to create your own transitiong view, for example (`Transition` parameter is provided by the inherited `TransitionableLayoutComponent`)\n```html\n@inherits TransitionableLayoutComponent\n\n\u003cdiv class=\"@transitioningClass\"\u003e\n    @Body\n\u003c/div\u003e\n\n@code {\n    private string transitioningDirection =\u003e Transition.Backwards ? \"Up\" : \"Down\";\n\n    private string transitioningClass =\u003e Transition.FirstRender ? \"\" : Transition.IntoView\n        ? $\"animate__fadeIn{transitioningDirection} animate__faster animate__animated\"\n         : $\"animate__fadeOut{transitioningDirection} animate__faster animate__animated\";\n}\n```\n(alternatively you can use the default one provided by the component called `TransitionableLayoutComponent` but you will need to handle the `Transition' cascading parameter and probably wrap each page in it's own containing component.  You are free to implement how you like but the cascading parameter is your starting point to prepare for transitioning.)\n\n### Optional example JavaScript Interop usage\nYou can optionally create an implementation of `IRouteTransitionInvoker` and save it where you like, perhaps in `Shared` folder and make sure it is registered with DI. \n```C#\nusing BlazorTransitionableRoute;\nusing Microsoft.JSInterop;\nusing System.Threading.Tasks;\n\nnamespace BlazorTransitionableRouteDemoWasm.Client.Shared\n{\n    public class RouteTransitionInvoker : IRouteTransitionInvoker\n    {\n        private readonly IJSRuntime jsRuntime;\n\n        public RouteTransitionInvoker(IJSRuntime jsRuntime)\n        {\n            this.jsRuntime = jsRuntime;\n        }\n\n        public async Task InvokeRouteTransitionAsync(bool backwards)\n        {\n            await jsRuntime.InvokeVoidAsync(\"window.yourJsInterop.transitionFunction\", backwards);\n        }\n    }\n}\n```\n\nFor client-side and server-side Blazor - add script section to index.html or _Host.cshtml (head section), for example\n```html\n\u003cscript src=\"yourJsInteropForAnimatedTransitions.js\"\u003e\u003c/script\u003e\n... any other supporting animation library scripts you are using, for example using animate.css\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css\" /\u003e\n```\n\nAdd your js interop implementation, for example (this is from the demos using animate.css)\n```Javascript\nwindow.yourJsInterop = {\n    transitionFunction: function (back) {\n\n        let transitionIn = document.getElementsByClassName('transition-in')[0];\n        let transitionOut = document.getElementsByClassName('transition-out')[0];\n\n        let direction = back ? \"Up\" : \"Down\";\n\n        if (transitionIn \u0026\u0026 transitionOut) {\n\n            transitionOut.classList.remove('transition-out');\n            transitionOut.classList.add(\n                \"animate__fadeOut\" + direction,\n                \"animate__faster\",\n                \"animate__animated\"\n            );\n\n            transitionIn.classList.remove('transition-in');\n            transitionIn.classList.add(\n                \"animate__fadeIn\" + direction,\n                \"animate__faster\",\n                \"animate__animated\"\n            );\n        }\n    }\n}\n```\nIf you experience timing issues when transition animations are not performing you may need to wrap you inner function code in a zero timeout, for example\n```Javascript\nwindow.yourJsInterop = {\n    transitionFunction: function (back) {\n        setTimout(() =\u003e {\n           ...\n        }, 0);\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJByfordRew%2FBlazorTransitionableRoute","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJByfordRew%2FBlazorTransitionableRoute","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJByfordRew%2FBlazorTransitionableRoute/lists"}