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:
Exit animations with standard CSS
Once exit animations have completed, start the View Transition
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
Improved Support for View Transitions
Standard (non-View Transition) CSS animations can be used alongside View Transitions, rather than the factory swithcing between
Turntypes. When supported and enabled, The flow will be as follows: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-transitionsandturn-no-view-transitionsfor customising animations based on View Transition supportturn-advance,turn-restore,turn-replacefor customising animations based on the Turbo Visit action: this enables support for animating restoration visitsturn-before-transition,turn-transitionfor customising animations during a View TransitionBetter Examples
Examples have been overhauled to better demonstrate various use cases with and without View Transitions