Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document view transitions #158

Merged
merged 7 commits into from
Feb 7, 2024
Merged

Document view transitions #158

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f273262
Document view transitions
afcapel Jan 25, 2024
956ac4e
Better css example
afcapel Jan 26, 2024
86b5423
Add data-turbo-visit-direction to attributes reference
afcapel Jan 26, 2024
2f87800
Be more precise
afcapel Jan 26, 2024
eeab035
Document meta tag
afcapel Jan 26, 2024
99dfc92
Clarify it’s optional
afcapel Jan 31, 2024
e6fe03e
Merge remote-tracking branch 'origin/main' into document-view-transit…
afcapel Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions _source/handbook/02_drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,30 @@ import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
```

## View transitions

In [browsers that support](https://caniuse.com/?search=View%20Transition%20API) the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) Turbo can trigger view transitions when navigating between pages.

Turbo triggers a view transition when both the current and the next page have this meta tag:

```
<meta name="view-transition" content="same-origin" />
```

Turbo also adds a `data-turbo-visit-direction` attribute to the `<html>` element to indicate the direction of the transition. The attribute can have one of the following values:

- `forward` in advance visits.
- `back` in restoration visits.
- `none` in replace visits.

You can use this attribute to animate the transition between pages:
afcapel marked this conversation as resolved.
Show resolved Hide resolved

```css
html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
animation: slide-to-right 0.5s ease-out;
}
```

## Displaying Progress

During Turbo Drive navigation, the browser will not display its native progress indicator. Turbo Drive installs a CSS-based progress bar to provide feedback while issuing a request.
Expand Down
1 change: 1 addition & 0 deletions _source/reference/attributes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ The following attributes are automatically added by Turbo and are useful to dete

* `disabled` is added to the form submitter while the form request is in progress, to prevent repeat submissions.
* `data-turbo-preview` is added to the `html` element when displaying a [preview](/handbook/building#detecting-when-a-preview-is-visible) during a Visit.
* `data-turbo-visit-direction` is added to the `html` element during a view transition, with a value of `forward` or `back` or `none`, to indicate its direction.
afcapel marked this conversation as resolved.
Show resolved Hide resolved
* `aria-busy` is added to `html` and `turbo-frame` elements when a navigation is in progress.

## Meta Tags
Expand Down