deploy: ccb5744

handbook/drive.html

@@ -152,7 +152,7 @@
 
     <h1>Navigate with Turbo Drive</h1>
 <p>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 <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a>.</p>
-<nav class="table-of-contents"><ul><li><a href="#page-navigation-basics"> Page Navigation Basics</a></li><li><a href="#application-visits"> Application Visits</a></li><li><a href="#restoration-visits"> Restoration Visits</a></li><li><a href="#canceling-visits-before-they-start"> Canceling Visits Before They Start</a></li><li><a href="#custom-rendering"> Custom Rendering</a></li><li><a href="#pausing-rendering"> Pausing Rendering</a></li><li><a href="#pausing-requests"> Pausing Requests</a></li><li><a href="#performing-visits-with-a-different-method"> Performing Visits With a Different Method</a></li><li><a href="#requiring-confirmation-for-a-visit"> Requiring Confirmation for a Visit</a></li><li><a href="#disabling-turbo-drive-on-specific-links-or-forms"> Disabling Turbo Drive on Specific Links or Forms</a></li><li><a href="#displaying-progress"> Displaying Progress</a></li><li><a href="#reloading-when-assets-change"> Reloading When Assets Change</a></li><li><a href="#ensuring-specific-pages-trigger-a-full-reload"> Ensuring Specific Pages Trigger a Full Reload</a></li><li><a href="#setting-a-root-location"> Setting a Root Location</a></li><li><a href="#form-submissions"> Form Submissions</a></li><li><a href="#redirecting-after-a-form-submission"> Redirecting After a Form Submission</a></li><li><a href="#streaming-after-a-form-submission"> Streaming After a Form Submission</a></li><li><a href="#instantclick"> InstantClick</a></li><li><a href="#preload-links-into-the-cache"> Preload Links Into the Cache</a></li></ul></nav><h2 id="page-navigation-basics"><a class="anchor" href="#page-navigation-basics">﹟</a> Page Navigation Basics</h2>
+<nav class="table-of-contents"><ul><li><a href="#page-navigation-basics"> Page Navigation Basics</a></li><li><a href="#application-visits"> Application Visits</a></li><li><a href="#restoration-visits"> Restoration Visits</a></li><li><a href="#canceling-visits-before-they-start"> Canceling Visits Before They Start</a></li><li><a href="#custom-rendering"> Custom Rendering</a></li><li><a href="#pausing-rendering"> Pausing Rendering</a></li><li><a href="#pausing-requests"> Pausing Requests</a></li><li><a href="#performing-visits-with-a-different-method"> Performing Visits With a Different Method</a></li><li><a href="#requiring-confirmation-for-a-visit"> Requiring Confirmation for a Visit</a></li><li><a href="#disabling-turbo-drive-on-specific-links-or-forms"> Disabling Turbo Drive on Specific Links or Forms</a></li><li><a href="#view-transitions"> View transitions</a></li><li><a href="#displaying-progress"> Displaying Progress</a></li><li><a href="#reloading-when-assets-change"> Reloading When Assets Change</a></li><li><a href="#ensuring-specific-pages-trigger-a-full-reload"> Ensuring Specific Pages Trigger a Full Reload</a></li><li><a href="#setting-a-root-location"> Setting a Root Location</a></li><li><a href="#form-submissions"> Form Submissions</a></li><li><a href="#redirecting-after-a-form-submission"> Redirecting After a Form Submission</a></li><li><a href="#streaming-after-a-form-submission"> Streaming After a Form Submission</a></li><li><a href="#instantclick"> InstantClick</a></li><li><a href="#preload-links-into-the-cache"> Preload Links Into the Cache</a></li></ul></nav><h2 id="page-navigation-basics"><a class="anchor" href="#page-navigation-basics">﹟</a> Page Navigation Basics</h2>
 <p>Turbo Drive models page navigation as a <em>visit</em> to a <em>location</em> (URL) with an <em>action</em>.</p>
 <p>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.</p>
 <p>There are two types of visit: an <em>application visit</em>, which has an action of <em>advance</em> or <em>replace</em>, and a <em>restoration visit</em>, which has an action of <em>restore</em>.</p>
@@ -214,6 +214,19 @@ <h2 id="disabling-turbo-drive-on-specific-links-or-forms"><a class="anchor" href
 <p>Links or forms with Turbo Drive disabled will be handled normally by the browser.</p>
 <p>If you want Drive to be opt-in rather than opt-out, then you can set <code>Turbo.session.drive = false</code>; then, <code>data-turbo=&quot;true&quot;</code> is used to enable Drive on a per-element basis. If you’re importing Turbo in a JavaScript pack, you can do this globally:</p>
 <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Turbo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@hotwired/turbo-rails"</span><br>Turbo<span class="token punctuation">.</span>session<span class="token punctuation">.</span>drive <span class="token operator">=</span> <span class="token boolean">false</span></code></pre>
+<h2 id="view-transitions"><a class="anchor" href="#view-transitions">﹟</a> View transitions</h2>
+<p>In <a href="https://caniuse.com/?search=View%20Transition%20API">browsers that support</a> the <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">View Transition API</a> Turbo can trigger view transitions when navigating between pages.</p>
+<p>Turbo triggers a view transition when both the current and the next page have this meta tag:</p>
+<pre><code>&lt;meta name=&quot;view-transition&quot; content=&quot;same-origin&quot; /&gt;
+</code></pre>
+<p>Turbo also adds a <code>data-turbo-visit-direction</code> attribute to the <code>&lt;html&gt;</code> element to indicate the direction of the transition. The attribute can have one of the following values:</p>
+<ul>
+<li><code>forward</code> in advance visits.</li>
+<li><code>back</code> in restoration visits.</li>
+<li><code>none</code> in replace visits.</li>
+</ul>
+<p>You can use this attribute to customize the animations that are performed during a transition:</p>
+<pre class="language-css"><code class="language-css"><span class="token selector">html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child</span> <span class="token punctuation">{</span><br>  <span class="token property">animation</span><span class="token punctuation">:</span> slide-to-right 0.5s ease-out<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
 <h2 id="displaying-progress"><a class="anchor" href="#displaying-progress">﹟</a> Displaying Progress</h2>
 <p>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.</p>
 <p>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 <a href="/reference/drive#turbodrivesetprogressbardelay"><code>Turbo.setProgressBarDelay</code></a> method.)</p>

reference/attributes.html

@@ -171,6 +171,7 @@ <h2 id="automatically-added-attributes"><a class="anchor" href="#automatically-a
 <ul>
 <li><code>disabled</code> is added to the form submitter while the form request is in progress, to prevent repeat submissions.</li>
 <li><code>data-turbo-preview</code> is added to the <code>html</code> element when displaying a <a href="/handbook/building#detecting-when-a-preview-is-visible">preview</a> during a Visit.</li>
+<li><code>data-turbo-visit-direction</code> is added to the <code>html</code> element during a visit, with a value of <code>forward</code> or <code>back</code> or <code>none</code>, to indicate its direction.</li>
 <li><code>aria-busy</code> is added to <code>html</code> and <code>turbo-frame</code> elements when a navigation is in progress.</li>
 </ul>
 <h2 id="meta-tags"><a class="anchor" href="#meta-tags">﹟</a> Meta Tags</h2>
@@ -179,6 +180,7 @@ <h2 id="meta-tags"><a class="anchor" href="#meta-tags">﹟</a> Meta Tags</h2>
 <li><code>&lt;meta name=&quot;turbo-cache-control&quot;&gt;</code> to <a href="/handbook/building#opting-out-of-caching">opt out of caching</a>.</li>
 <li><code>&lt;meta name=&quot;turbo-visit-control&quot; content=&quot;reload&quot;&gt;</code> will perform a full page reload whenever Turbo navigates to the page, including when the request originates from a <code>&lt;turbo-frame&gt;</code>.</li>
 <li><code>&lt;meta name=&quot;turbo-root&quot;&gt;</code> to <a href="/handbook/drive#setting-a-root-location">scope Turbo Drive to a particular root location</a>.</li>
+<li><code>&lt;meta name=&quot;view-transition&quot; content=&quot;same-origin&quot;&gt;</code> to trigger view transitions on browsers that support the <a href="https://caniuse.com/view-transitions">View Transition API</a>.</li>
 <li><code>&lt;meta name=&quot;turbo-refresh-method&quot; content=&quot;morph&quot;&gt;</code> will configure <a href="/handbook/page_refreshes.html">page refreshes with morphing</a>.</li>
 <li><code>&lt;meta name=&quot;turbo-refresh-scroll&quot; content=&quot;preserve&quot;&gt;</code> will enable <a href="/handbook/page_refreshes.html">scroll preservation during page refreshes</a>.</li>
 </ul>