Tips from using 'view transitions' in JavaScript

 I have been using Chrome's 'view transitions'.

I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element.

I can do this when the 'view transition' ends using a promise:

    transition =
        document.startViewTransition(play);

    transition.finished.then(finishViewTransition);

I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:

    ::view-transition-old(doNothing),
    ::view-transition-new(doNothing) {
        animation: none;
    }
    .vtDoNothing {
        view-transition-name: doNothing;
    }

    #confirmBox {

    ...

    document.documentElement.className += 'vtDoNothing';

I vary the animation in a 'view transition' by creating a 'style' element in JavaScript, then setting the 'innerHTML', and finally adding this 'style' element to the 'head' element of the page.

I use an 'animation delay' to make the 'new' animation follow the 'old' animation rather than crossing. For example:

    ::view-transition-old(endGame) {
        animation: vtFadeOut   .5s linear both,
                   vtZoomIn    .5s linear both,
                   vtSpiralIn  .5s linear both;
    }
    ::view-transition-new(endGame) {
        animation: vtFadeIn    .5s .5s linear both,
                   vtZoomOut   .5s .5s linear both,
                   vtSpiralOut .5s .5s linear both;
    }

I keep the 'view transitions' short because the user cannot interact with the page while a 'view transition' is running.  However the page can be changing while the 'view transition' animations are running.  I use 'linear' animations so the page does not seem to freeze at the end of the 'view transition'.

The animations in a 'view transition' only happen when the browser has calculated the final state of the page. These calculations happen in the background and are not visible to the user.  Before I used the new 'view transitions' API, I would animate away the old page state, then there would be a delay (maybe a blank screen) while the browser calculated the new page state, before I could animate in the new page state.  However, in this old way, the user could interact with the page during the animations. If the user wanted to, I could stop the animation and move on.  My 'old' page animations seem slow and jerky compared with the new 'view transitions'.  

I also turn on a cross-fade when following links between my pages by adding to their stylesheets:

      @view-transition {
                  navigation: auto;
      }

I can very quickly add page animations to my game with the new 'view transitions' API. It is easy to use the default 'cross-fade' and, although subtle, it looks very good. I use this when changing tabs in my 'settings' page.