ViewTransitionMixin

Easily transition between ui states with View Transitions.

The ViewTransitionMixin lets you use View Transitions when updating a StatefulComponents State.

Usage

Start by adding the ViewTransitionMixin on a StatefulComponents State class.

class MyStatefulComponent extends StatefulComponent { /* ... */ }

class MyState extends State<MyStatefulComponent> with ViewTransitionMixin {

  /* ... */
}

This will give you access to the setStateWithViewTransition() method, which is a drop-in replacement for setState() and will start an animated view transition for your state change.

You must also define your view transitions in css using the View Transitions API.

In addition to the main callback function, setStateWithViewTransition() also takes a named preTransition and postTransition callback. You can use these to change your state before or after the transition, e.g. to apply custom view transition names on elements.