feat: Fade

This commit is contained in:
ThatOneCalculator 2022-08-19 23:38:01 -07:00
parent 817ccb5b32
commit eafc3260c9
2 changed files with 40 additions and 16 deletions

View File

@ -1,6 +1,6 @@
{
"name": "misskey",
"version": "12.118.1-calc.11",
"version": "12.118.1-calc.11.1",
"codename": "aqua",
"repository": {
"type": "git",

View File

@ -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>