Skip to content

Commit

Permalink
be a bit more clear on types
Browse files Browse the repository at this point in the history
  • Loading branch information
martrapp committed Dec 25, 2024
1 parent 19251e1 commit da18d25
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 7 deletions.
21 changes: 16 additions & 5 deletions src/content/docs/basics/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -292,11 +292,9 @@ This might best be combined with dynamically (per script) added view transition

Often you want to support different animations for a given view transition pseudo-element and select one of those alternatives depending on some condition. The concept that the View Transition API provides for this use case is called _active view transition types_.

:::note
This feature is available beginning with Level 2 of the View Transition API.
:::
While it is active, a view transition might have a set of identifiers called _types_ that can be used in CSS pseudo-classes to select different rules. During the view transition, the set can be altered at any time by assigning to the `types` property of the viewTransition object.

While it is active, a view transition might have a set of identifiers called _types_ that can be used in CSS pseudo-classes to select different rules. During the view transition, the set can be altered at any time by assigning to the `types` property of the viewTransition object. The initial set of types can be set when calling `startViewTransition()` or it might be specified using the `types` property inside a `@view-transition` rule.
The initial set of types can be set when calling `startViewTransition()` or it might be specified using the `types` property inside a `@view-transition` rule.

```ts title="Level 2 signature of startViewTranstion()"
document.startViewTransition({types: ['boom'], update: changeTheDOM})
Expand All @@ -308,7 +306,20 @@ or
types: boom, var(--special)
}
```
Another typical pattern for cross-document view transitions is to (conditionally) set the types in the `pagereveal` or `pageswap` handlers.
```js
listener(event) {
...
event.viewTransition.types.add("effect");
...
}
```

Types set during `pageswap` are only available on the old page. You can not use them to guide the styling of `::view-transition` pseudos because that CSS is always taken from the new page. But you can use the `pageswap` types to conditionally [set or remove view transition names](/basics/styling/#conditional-view-transitions) on the old page.

Types set during `pagereveal` can be used for both: setting and removing view transition names on the new page and for styling the view transition pseudo elements.

#### Active View Transition Types
The pseudo-class that can check for types is `:active-view-transition-type()`. It takes a comma separated list of types. If at least one of these types is set on the active view transition, the pseudo-class matches the documents root element.

Thus, the typical patterns to use `:active-view-transition-type()` are:
Expand Down Expand Up @@ -357,7 +368,7 @@ See the [Turn-Signal documentation](/tools/turn-signal/#css-for-reverse-animatio

The pseudo-classes can not only be used to define different animations for different situations. It is also possible to let the existence of a view transition group depend on view transitions types. So on some transitions, an element can have its own animation and on others it is just part of some parent and its animation.

You can find an example for this behavior on this site. When you visit the page about [flickers during morph animations](/tips/over-exposure/#root-causes-for-flashes) and visit it directly again be selecting it in the site navigation, you will see that for navigations to the same page, the `<main>` section does not have its own view transition. Also when you click the images on that page, you start view transitions where the `<main>` section is not animated.
You can find an example for this behavior on this site. When you visit the page about [flickers during morph animations](/tips/over-exposure/#root-causes-for-flashes) and visit it directly again be selecting it in the site navigation, you will see that for a navigation to the same page, the `<main>` section does not have its own view transition. Also when you click the images on that page, you start view transitions where the `<main>` section is not animated.
See the [Turn-Signal documentation](/tools/turn-signal/#switching-transition-names) on how this effect is achieved and how you could get even more specific and cancel single images instead of whole transition groups.

## Prefix Pseudo-Elements with `:root`?
Expand Down
2 changes: 2 additions & 0 deletions src/content/docs/tools/turn-signal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ The Turn-Signal is a lightweight script for purely progressive enhancement of cr

:::danger[Dependency on Browser APIs]
The Turn-Signal is designed for use with cross-document view transitions. It also depends on the Navigation API and made the assumption that all browsers that support level 2 of the View Transition API also support the Navigation API, which is actually not true for current versions of Safari. [Test](/basics/test-page/) your browser.

Thus Safari support is still under continuous improvement. Please open an issue at [github](https://github.com/vtbag/turn-signal/issues) if you face problems.
:::

## Demos
Expand Down
2 changes: 1 addition & 1 deletion src/pages/link-demo/_Navigation.astro
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const right = here % 3 === 2 ? here - 2 : here + 1;
class="nav-btn w"
data-vtbag-link-types="left/right">⬅️</a
>
<a href="/link-demo/" title="Back to dry land" class="nav-btn center" data-vtbag-link-types="out/dive">↖</a>
<a href="/link-demo/" title="Back to dry land" class="nav-btn center">↖</a>
<a
href={`/link-demo/${right}/`}title="Swim east"
class="nav-btn e"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/link-demo/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import WaveText from "./_WaveText.astro";
<style>
.landing {
width: 100vw;
height: 100vh;
height: 100dvh;
background-image: url("./_pond.webp");
background-size: cover;
background-position: center;
Expand Down

0 comments on commit da18d25

Please sign in to comment.