From 2a2fc75c0aa218697fd3590c14f15cf1615dbcbd Mon Sep 17 00:00:00 2001 From: Carson Gross Date: Fri, 31 Mar 2023 12:44:55 -0600 Subject: [PATCH] formatting --- www/examples/animations.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/www/examples/animations.md b/www/examples/animations.md index 2a3182b5..853d06c7 100644 --- a/www/examples/animations.md +++ b/www/examples/animations.md @@ -240,8 +240,17 @@ the transition time. This avoids flickering that can happen if the transition i ### [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: +via the `transition` option of the [`hx-swap`](/attributes/hx-swap) attribute. + +Below is an example of a swap that uses a view transition. The transition is tied to the outer div via a +`view-transition-name` property in CSS, and that transition is defined in terms of `::view-transition-old` +and `::view-transition-new`, using `@keyframes` to define the animation. (Fuller details on the View Transition +API can be found on the [Chrome Developer Page](https://developer.chrome.com/docs/web-platform/view-transitions/) on them.) + +The old content of this transition should slide out to the left and the new content should slide in from the right. + +Note that, as of this writing, the visual transition will only occur on Chrome 111+, but more browsers are expected to +implement this feature in the near future. ```html