diff --git a/handbook/drive.html b/handbook/drive.html index 1958c9a..6dacc07 100644 --- a/handbook/drive.html +++ b/handbook/drive.html @@ -152,7 +152,7 @@
Turbo Drive is the part of Turbo that enhances page-level navigation. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload. It’s the evolution of a library previously known as Turbolinks.
-Turbo Drive models page navigation as a visit to a location (URL) with an action.
Visits represent the entire navigation lifecycle from click to render. That includes changing browser history, issuing the network request, restoring a copy of the page from cache, rendering the final response, and updating the scroll position.
There are two types of visit: an application visit, which has an action of advance or replace, and a restoration visit, which has an action of restore.
@@ -214,6 +214,19 @@If you want Drive to be opt-in rather than opt-out, then you can set Turbo.session.drive = false
; then, data-turbo="true"
is used to enable Drive on a per-element basis. If you’re importing Turbo in a JavaScript pack, you can do this globally:
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
+In browsers that support the View Transition 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 customize the animations that are performed during a transition:
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
animation: slide-to-right 0.5s ease-out;
}
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.
The progress bar is enabled by default. It appears automatically for any page that takes longer than 500ms to load. (You can change this delay with the Turbo.setProgressBarDelay
method.)
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 name="turbo-cache-control">
to opt out of caching.<meta name="turbo-visit-control" content="reload">
will perform a full page reload whenever Turbo navigates to the page, including when the request originates from a <turbo-frame>
.<meta name="turbo-root">
to scope Turbo Drive to a particular root location.<meta name="view-transition" content="same-origin">
to trigger view transitions on browsers that support the View Transition API.<meta name="turbo-refresh-method" content="morph">
will configure page refreshes with morphing.<meta name="turbo-refresh-scroll" content="preserve">
will enable scroll preservation during page refreshes.