view transition demo

test/scratch/scratch.html

@@ -15,33 +15,7 @@
 
     </style>
 
-    <style>
-        @keyframes fade-in {
-            from { opacity: 0; }
-        }
 
-        @keyframes fade-out {
-            to { opacity: 0; }
-        }
-
-        @keyframes slide-from-right {
-            from { transform: translateX(30px); }
-        }
-
-        @keyframes slide-to-left {
-            to { transform: translateX(-30px); }
-        }
-
-        ::view-transition-old(root) {
-            animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-        }
-
-        ::view-transition-new(root) {
-            animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-        }
-    </style>
 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
@@ -107,5 +81,51 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
         hx-swap="innerHTML transition:true">Issue Request</button>
 <h1 id="h1">--</h1>
 
+<script>
+    this.server.respondWith("GET", "/new-content", function(xhr){
+        xhr.respond(200,  {}, "<h1>New Content</h1>")
+    });
+</script>
+
+<style>
+    @keyframes fade-in {
+        from { opacity: 0; }
+    }
+
+    @keyframes fade-out {
+        to { opacity: 0; }
+    }
+
+    @keyframes slide-from-right {
+        from { transform: translateX(90px); }
+    }
+
+    @keyframes slide-to-left {
+        to { transform: translateX(-90px); }
+    }
+
+    .slide-it {
+        view-transition-name: slide-it;
+    }
+
+    ::view-transition-old(slide-it) {
+        animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+    }
+    ::view-transition-new(slide-it) {
+        animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+    }
+</style>
+
+
+<div class="slide-it">
+    <h1>Initial Content</h1>
+    <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
+        Swap It!
+    </button>
+</div>
+
+
 </body>
 </html>

www/docs.md

@@ -434,6 +434,8 @@ You can experiment with this new API using the following approaches:
 
 View Transitions can be configured using CSS, as outlined in [the Chrome documentation for the feature](https://developer.chrome.com/docs/web-platform/view-transitions/#simple-customization).
 
+You can see a view transition example on the [Animation Examples](/examples/animations#view-transitions) page.
+
 ### <a name="synchronization"></a> [Synchronization](#synchronization)
 
 Often you want to coordinate the requests between two elements.  For example, you may want a request from one element

www/examples/animations.md

@@ -4,10 +4,13 @@ layout: demo_layout.njk
         
 ## Animations
 
-Htmx is designed to allow you to use [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+htmx is designed to allow you to use [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
 to add smooth animations and transitions to your web page using only CSS and HTML.  Below are a few examples of
 various animation techniques.
 
+htmx also allows you to use the new [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+for creating animations.
+
 ### <a name='basic'></a>[Basic CSS Animations](#basic)
 
 #### Color Throb
@@ -234,6 +237,100 @@ the transition time.  This avoids flickering that can happen if the transition i
 </style>
 <div class="demo" classes="toggle faded:1s">Toggle Demo</div>
 
+### <a name="view-transitions"></a>[Using the View Transition API](#view-transitions)
+
+htmx provides access to the new  [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+via the `transition` option of the [`hx-swap`](/attributes/hx-swap) attribute.  Here is an example of a swap
+that will use the transition:
+
+```html
+<style>
+        @keyframes fade-in {
+                from { opacity: 0; }
+        }
+
+        @keyframes fade-out {
+                to { opacity: 0; }
+        }
+
+        @keyframes slide-from-right {
+                from { transform: translateX(90px); }
+        }
+
+        @keyframes slide-to-left {
+                to { transform: translateX(-90px); }
+        }
+
+        .slide-it {
+                view-transition-name: slide-it;
+        }
+
+        ::view-transition-old(slide-it) {
+                animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+                600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+        }
+        ::view-transition-new(slide-it) {
+                animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+                600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+        }
+</style>
+
+
+<div class="slide-it">
+        <h1>Initial Content</h1>
+        <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
+                Swap It!
+        </button>
+</div>
+```
+
+#### Demo
+
+<script>
+    this.server.respondWith("GET", "/new-content", function(xhr){
+        xhr.respond(200,  {}, "<h1>New Content</h1>")
+    });
+</script>
+
+<style>
+    @keyframes fade-in {
+        from { opacity: 0; }
+    }
+
+    @keyframes fade-out {
+        to { opacity: 0; }
+    }
+
+    @keyframes slide-from-right {
+        from { transform: translateX(90px); }
+    }
+
+    @keyframes slide-to-left {
+        to { transform: translateX(-90px); }
+    }
+
+    .slide-it {
+        view-transition-name: slide-it;
+    }
+
+    ::view-transition-old(slide-it) {
+        animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+    }
+    ::view-transition-new(slide-it) {
+        animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+    }
+</style>
+
+
+<div class="slide-it">
+    <h1>Initial Content</h1>
+    <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
+        Swap It!
+    </button>
+</div>
+
 #### Conclusion
 
 You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx.