✨ View Transition API

[itsezc]

Description

View Transition API is an upcoming Web API that is a fusion of JS & CSS to allow for smooth 60 fps (more really) transitions on the web, with relative ease.

It'd be great if we can abstract over this with Master

Resources:
https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
https://developer.chrome.com/docs/web-platform/view-transitions/

[1aron]

I'm impressed with the new CSS API, which allows us to manipulate browser behavior directly through CSS.

• View Transitions API Level 1 WebKit/standards-positions#48

Syntactically, it may be supported now:

<div class="{view-transition-name:hero}">...</div>

It requires creating a new API config.viewTransitions to define view transitions, similar to config.animations.

export default {
    viewTransitions: {
        hero: {
            old: '@fade|.2s|linear|forwards',
            new: '@fade|.3s|linear|reverse'
        }
    }
}

[1aron]

@itsezc The API is not complex, but we tend to release it in 2.1 or 2.2; 2.0 is too much information now 😂!

[pragyamishra56]

@1aron If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

[1aron]

@1aron If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

I'm glad you're so enthusiastic! ☺️ This feature involving the core of Master CSS has been initially planned and is expected to be mastered by the team.

#169 has been assigned to you.

[Ayfri]

Any update ?

[1aron]

Any update ?

Not yet; we are working hard on writing extensive documentation for v2 features. You can create view transitions through native CSS as a temporary alternative.