itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 05:51:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Carson Gross 2023-03-31 12:44:55 -06:00
parent 9a73bdf0d5
commit 2a2fc75c0a
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/examples/animations.md
View File

@ -240,8 +240,17 @@ the transition time. This avoids flickering that can happen if the transition i
### <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:
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
<style>