Skip to content

Improve support for View Transitions, Restoration animations, and better Examples - #6

Merged
domchristie merged 21 commits into
mainfrom
hybrid
Apr 3, 2023
Merged

Improve support for View Transitions, Restoration animations, and better Examples#6
domchristie merged 21 commits into
mainfrom
hybrid

Conversation

@domchristie

Copy link
Copy Markdown
Owner

Improved Support for View Transitions

Standard (non-View Transition) CSS animations can be used alongside View Transitions, rather than the factory swithcing between Turn types. When supported and enabled, The flow will be as follows:

  1. Exit animations with standard CSS
  2. Once exit animations have completed, start the View Transition
  3. Once the View Transition has completed, apply the enter animations

The architecture has been altered to make this change work. Turn classes are no longer responsible for tracking whether a render is a preview, a post-preview, or a direct one. This responsibility now lies with the Controller, which translates Turbo events into method calls on Turn instances.

Expanded Class Names + Restoration Animations

On the HTML element:

  • turn-view-transitions and turn-no-view-transitions for customising animations based on View Transition support
  • turn-advance, turn-restore, turn-replace for customising animations based on the Turbo Visit action: this enables support for animating restoration visits
  • turn-before-transition, turn-transition for customising animations during a View Transition

Better Examples

Examples have been overhauled to better demonstrate various use cases with and without View Transitions

@domchristie
domchristie merged commit 2583841 into main Apr 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant