VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

page transition edits

Browse Source
This commit is contained in:
perennial
2024-10-18 21:27:47 +11:00
parent 2ea81af1f4
commit f412367651
3 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap-style.css
Vendored
+20 -11
View File
@@ -14340,24 +14340,33 @@ h6, .h6 {
$transition-duration-in: 200ms; /// this should be equal to the settle duration set on the body element, and is added so that the new page doesnt suddenly pop in while the images are rendering
$transition-easing-out: ease-out;
$transition-easing-in: ease-in; */
body {
opacity: 1;
}
body.htmx-request {
opacity: 0.5;
transition: opacity 400ms ease-out;
}
body.htmx-settling {
opacity: 1;
transition: opacity 300ms ease-in;
}
/* @mixin fade-transition($duration, $easing) {
transition: opacity $duration $easing;
will-change: opacity;
} */
.fade-out {
opacity: 1;
transition: opacity 150ms ease-in-out;
/* Target when <body> has 'htmx-swapping' */
/* Target when <body> has 'htmx-settling' */
}
body.htmx-swapping .fade-out {
/* .fade-out.htmx-swapping {
opacity: 0;
transition: opacity 200ms ease-out;
} */
/* #fade-in.htmx-swapping {
opacity: 0;
}
body.htmx-settling .fade-out {
#fade-in {
opacity: 1;
/* transition-delay: 500ms; */
}
transition: opacity 1s ease-out;
} */
/* .fade-in {
opacity: 1;
assets/css/bootstrap-style.scss
Vendored
+29 -13
View File
@@ -498,27 +498,43 @@ $transition-duration-in: 200ms; /// this should be equal to the settle duration
$transition-easing-out: ease-out;
$transition-easing-in: ease-in; */
body {
opacity: 1;
&.htmx-request {
opacity: 0.5;
transition: opacity 400ms ease-out;
}
&.htmx-settling {
opacity: 1;
transition: opacity 300ms ease-in;
}
}
/* @mixin fade-transition($duration, $easing) {
transition: opacity $duration $easing;
will-change: opacity;
} */
.fade-out {
opacity: 1;
transition: opacity 150ms ease-in-out;
/* .fade-out.htmx-swapping {
opacity: 0;
transition: opacity 200ms ease-out;
} */
/* Target when <body> has 'htmx-swapping' */
body.htmx-swapping & {
opacity: 0;
}
/* Target when <body> has 'htmx-settling' */
body.htmx-settling & {
opacity: 1;
/// the 50ms delay here essentially gives the page content time to load (images etc)
/* transition-delay: 500ms; */
}
/* #fade-in.htmx-swapping {
opacity: 0;
}
#fade-in {
opacity: 1;
transition: opacity 1s ease-out;
} */
/* .fade-in {
opacity: 1;
assets/views/layout/default.jet.html
+5 -4
View File
@@ -68,14 +68,15 @@
{* NOTE: hx-swap="show:window:top" isn't needed when we hx-boost the body *}
{* NOTE: we need to specify swap and settle in hx-swap otherwise htmx won't apply the classes; durations set low for minimal impact *}
<body
id="body"
class="bg-neutral-900"
hx-boost="true"
hx-swap="innerHTML swap:150ms settle:150ms"
hx-swap="innerHTML settle:300ms"
hx-target="this"
data-hx-indicator="#loading-indicator"
data-hx-indicator="#body"
hx-ext="morph"
>
<div id="loading-indicator" class="fixed-top z-3"></div>
{* <div id="loading-indicator" class="fixed-top z-3"></div> *}
<nav class="navbar bg-charcoal-surface1 py-3 mb-4 js-required" id="main-navbar">
<div class="container">
<div class="d-flex">
@@ -180,7 +181,7 @@
{{- include "../noscript/navbar" }}
</noscript>
<main class="container fade-out mb-5">
<main class="container mb-5">
{{- yield body() }}
</main>