itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 22:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

formatting

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

108
www/examples/animations.md
View File

@ -245,42 +245,42 @@ that will use the transition:
```html ```html
<style> <style>
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
} }
@keyframes fade-out { @keyframes fade-out {
to { opacity: 0; } to { opacity: 0; }
} }
@keyframes slide-from-right { @keyframes slide-from-right {
from { transform: translateX(90px); } from { transform: translateX(90px); }
} }
@keyframes slide-to-left { @keyframes slide-to-left {
to { transform: translateX(-90px); } to { transform: translateX(-90px); }
} }
.slide-it { .slide-it {
view-transition-name: slide-it; view-transition-name: slide-it;
} }
::view-transition-old(slide-it) { ::view-transition-old(slide-it) {
animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 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; 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
} }
::view-transition-new(slide-it) { ::view-transition-new(slide-it) {
animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 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; 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
} }
</style> </style>
<div class="slide-it"> <div class="slide-it">
<h1>Initial Content</h1> <h1>Initial Content</h1>
<button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div"> <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
Swap It! Swap It!
</button> </button>
</div> </div>
``` ```
@ -293,42 +293,42 @@ that will use the transition:
</script> </script>
<style> <style>
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
} }
@keyframes fade-out { @keyframes fade-out {
to { opacity: 0; } to { opacity: 0; }
} }
@keyframes slide-from-right { @keyframes slide-from-right {
from { transform: translateX(90px); } from { transform: translateX(90px); }
} }
@keyframes slide-to-left { @keyframes slide-to-left {
to { transform: translateX(-90px); } to { transform: translateX(-90px); }
} }
.slide-it { .slide-it {
view-transition-name: slide-it; view-transition-name: slide-it;
} }
::view-transition-old(slide-it) { ::view-transition-old(slide-it) {
animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 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; 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
} }
::view-transition-new(slide-it) { ::view-transition-new(slide-it) {
animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 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; 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
} }
</style> </style>
<div class="slide-it"> <div class="slide-it">
<h1>Initial Content</h1> <h1>Initial Content</h1>
<button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div"> <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
Swap It! Swap It!
</button> </button>
</div> </div>
#### Conclusion #### Conclusion