noamr/vt-fallback-types.md

## vt-fallback-types.md

      
    Raw
  

              vt-fallback-types.md
            
          
    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>