dotnet / dotnet/aspnetcore

View Transitions API with Blazor WASM

Open
#47,164 5 comments 14 reactions 0 assignees View on GitHub
area-blazor enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.