View Transitions API with Blazor WASM
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Describe the bug
View Transitions API is now available in stable Chrome.
Link to documentation : https://developer.chrome.com/docs/web-platform/view-transitions/
What is the best way to use this with Blazor when navigation occurs ?
When i try :
c# code :
private` DotNetObjectReference? objRef;
protected override void OnInitialized()
{
objRef = DotNetObjectReference.Create(this);
}
protected override async Task OnInitializedAsync()
{
await jsRuntime.InvokeVoidAsync("startViewTransition", objRef);
}
[JSInvokable]
public async Task GetData()
{
data = await repository.GetData();
StateHasChanged();
}
js code :
window.startViewTransition = (dotNetHelper) => {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
dotNetHelper.invokeMethodAsync('GetData');
return;
}
// With a transition:
document.startViewTransition(() => dotNetHelper.invokeMethodAsync('GetData'));
};
It works, but this is not perfect because the View Transitions API takes a "screenshot" of the initial state.
Thanks for your help !
### Expected Behavior
_No response_
### Steps To Reproduce
_No response_
### Exceptions (if any)
_No response_
### .NET Version
7
### Anything else?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.