VT and types: fallbacks

The use-case: a page where elements transition to each other, but only if they're loaded. If the page is only partially loaded without those elements, the whole root elements transitions with a fade.

Old document:

@view-transition {
    navigation: auto;
    type: morph;
}

::active-view-transition(morph) {
    #some-element-1 {view-transition-name: foobar}
}

New document:

<style>
@view-transition {
    navigation: auto;
    type: fallback;
}

::active-view-transition(fallback) {
    ::view-transition-group(*) {
        animation: none;
    }

    ::view-transition-group(root) {
        animation-name: fade;
    }
}

::active-view-transition(morph) {
    .some-element-2 {view-transition-name: foobar}
}
</style>
<!-- a whole bunch of content, progressively loaded-->
<div class="some-element-2">stuff</div>
<style>
@view-transition {
    navigation: auto;
    type: morph;
}
</style>

noamr/vt-fallback-types.md

VT and types: fallbacks