Skip to content

Instantly share code, notes, and snippets.

@noamr

noamr/vt-fallback-types.md

Created November 21, 2023 19:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save noamr/eff31aa0fed54c3af91426e38a4e616f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save noamr/eff31aa0fed54c3af91426e38a4e616f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. noamr created this gist Nov 21, 2023.
    51 changes: 51 additions & 0 deletions vt-fallback-types.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    # 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:
    ```css
    @view-transition {
    navigation: auto;
    type: morph;
    }

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

    ```

    New document:

    ```html
    <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>
    ```