feat: ✨ Fade
This commit is contained in:
parent
817ccb5b32
commit
eafc3260c9
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "misskey",
|
||||
"version": "12.118.1-calc.11",
|
||||
"version": "12.118.1-calc.11.1",
|
||||
"codename": "aqua",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<svg class="fader" ref="fader"></svg>
|
||||
<template #header>
|
||||
<MkPageHeader
|
||||
v-model:tab="src"
|
||||
|
@ -83,6 +84,7 @@ window.addEventListener('resize', () => {
|
|||
|
||||
const tlComponent = $ref<InstanceType<typeof XTimeline>>();
|
||||
const rootEl = $ref<HTMLElement>();
|
||||
const fader = $ref<SVGElement>();
|
||||
|
||||
let queue = $ref(0);
|
||||
const src = $computed({
|
||||
|
@ -276,27 +278,20 @@ if (isMobile.value) {
|
|||
|
||||
if (Math.abs(xDiff) > Math.abs(yDiff)) {
|
||||
if (xDiff > 0) {
|
||||
console.log('right swipe');
|
||||
next =
|
||||
timelines[
|
||||
(timelines.indexOf(src) + 1) % timelines.length
|
||||
];
|
||||
} else {
|
||||
console.log('left swipe');
|
||||
next =
|
||||
timelines[
|
||||
(timelines.indexOf(src) - 1) % timelines.length
|
||||
];
|
||||
}
|
||||
saveSrc(next);
|
||||
} /* else {
|
||||
if (yDiff > 0) {
|
||||
// down swipe
|
||||
} else {
|
||||
// up swipe
|
||||
next =
|
||||
timelines[
|
||||
(timelines.indexOf(src) + 1) % timelines.length
|
||||
];
|
||||
}
|
||||
} */
|
||||
/* reset values */
|
||||
fader.classList.remove('fade');
|
||||
fader.classList.add('fade');
|
||||
saveSrc(next);
|
||||
}
|
||||
xDown = null;
|
||||
yDown = null;
|
||||
return;
|
||||
|
@ -330,4 +325,33 @@ if (isMobile.value) {
|
|||
overflow: clip;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0%, 100% { opacity: 0 }
|
||||
50% { opacity: 1 }
|
||||
}
|
||||
|
||||
.fader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 1001;
|
||||
pointer-events: none;
|
||||
background: var(--acrylicBg);
|
||||
animation-duration: 0.25s;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
> .fadeOut {
|
||||
opacity: 0;
|
||||
animation-name: fade-out;
|
||||
}
|
||||
|
||||
> .fadeIn {
|
||||
opacity: 1;
|
||||
animation-name: fade-in;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue