From f27326240f84ae40b241cd36d1e837266613d0a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Thu, 25 Jan 2024 16:23:08 +0000 Subject: [PATCH 1/6] Document view transitions Introduced in https://github.com/hotwired/turbo/pull/935 and https://github.com/hotwired/turbo/pull/1007/ --- _source/handbook/02_drive.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/_source/handbook/02_drive.md b/_source/handbook/02_drive.md index 5417c9e..60602cf 100644 --- a/_source/handbook/02_drive.md +++ b/_source/handbook/02_drive.md @@ -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: + +``` + +``` + +Turbo also adds a `data-turbo-visit-direction` attribute to the `` 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: + +```css +html[data-turbo-visit-direction="forward"] #sidebar { + animation: fade-in 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. From 956ac4e7e1278fff68942b48c3dd2e9cdd159790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Fri, 26 Jan 2024 10:22:48 +0000 Subject: [PATCH 2/6] Better css example Co-authored-by: Dom Christie --- _source/handbook/02_drive.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_source/handbook/02_drive.md b/_source/handbook/02_drive.md index 60602cf..3b5685f 100644 --- a/_source/handbook/02_drive.md +++ b/_source/handbook/02_drive.md @@ -205,8 +205,8 @@ Turbo also adds a `data-turbo-visit-direction` attribute to the `` element You can use this attribute to animate the transition between pages: ```css -html[data-turbo-visit-direction="forward"] #sidebar { - animation: fade-in 0.5s ease-out; +html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child { + animation: slide-to-right 0.5s ease-out; } ``` From 86b5423b6e1d458d3a09b3d230f0144a42668b07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Fri, 26 Jan 2024 10:26:16 +0000 Subject: [PATCH 3/6] Add data-turbo-visit-direction to attributes reference --- _source/reference/attributes.md | 1 + 1 file changed, 1 insertion(+) diff --git a/_source/reference/attributes.md b/_source/reference/attributes.md index 9034a7b..d73dc43 100644 --- a/_source/reference/attributes.md +++ b/_source/reference/attributes.md @@ -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. * `aria-busy` is added to `html` and `turbo-frame` elements when a navigation is in progress. ## Meta Tags From 2f87800edfbf6be0f8b208a9f5191e8e270b4fd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Fri, 26 Jan 2024 10:58:57 +0000 Subject: [PATCH 4/6] Be more precise Co-authored-by: Dom Christie --- _source/reference/attributes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_source/reference/attributes.md b/_source/reference/attributes.md index d73dc43..6985e50 100644 --- a/_source/reference/attributes.md +++ b/_source/reference/attributes.md @@ -29,7 +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. +* `data-turbo-visit-direction` is added to the `html` element during a visit, with a value of `forward` or `back` or `none`, to indicate its direction. * `aria-busy` is added to `html` and `turbo-frame` elements when a navigation is in progress. ## Meta Tags From eeab035fc57851d5d864df7605e1975773a122c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Fri, 26 Jan 2024 11:03:49 +0000 Subject: [PATCH 5/6] Document meta tag --- _source/reference/attributes.md | 1 + 1 file changed, 1 insertion(+) diff --git a/_source/reference/attributes.md b/_source/reference/attributes.md index 6985e50..6440072 100644 --- a/_source/reference/attributes.md +++ b/_source/reference/attributes.md @@ -39,3 +39,4 @@ The following `meta` elements, added to the `head`, can be used to customize cac * `` to [opt out of caching](/handbook/building#opting-out-of-caching). * `` will perform a full page reload whenever Turbo navigates to the page, including when the request originates from a ``. * `` to [scope Turbo Drive to a particular root location](/handbook/drive#setting-a-root-location). +* `` to trigger view transitions on browsers that support the [View Transition API](https://caniuse.com/view-transitions). From 99dfc925766920a953402562c44c2285e7558fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Wed, 31 Jan 2024 20:12:00 +0000 Subject: [PATCH 6/6] =?UTF-8?q?Clarify=20it=E2=80=99s=20optional?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kevin McConnell --- _source/handbook/02_drive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_source/handbook/02_drive.md b/_source/handbook/02_drive.md index 3b5685f..7d7abf6 100644 --- a/_source/handbook/02_drive.md +++ b/_source/handbook/02_drive.md @@ -202,7 +202,7 @@ Turbo also adds a `data-turbo-visit-direction` attribute to the `` element - `back` in restoration visits. - `none` in replace visits. -You can use this attribute to animate the transition between pages: +You can use this attribute to customize the animations that are performed during a transition: ```css html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {