monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-22 16:26:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

finished fixing the animation

Browse source
This commit is contained in:
Miodec 2022-08-24 13:56:39 +02:00
parent 708866f144
commit f3f1ba4d08
2 changed files with 135 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/styles/test.scss
View file

@ -992,7 +992,7 @@
justify-content: space-around;
transition: 0.125s;
.puncAndNum {
transition: 0.25s;
// transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
overflow: hidden;
max-width: 13rem;
opacity: 1;
@ -1027,6 +1027,15 @@
gap: 0.5rem;
grid-auto-flow: column;
}
.time,
.wordCount,
.customText,
.zen,
.quoteLength {
// width: 100%;
justify-content: center;
overflow: hidden;
}
}
.pageTest {

129
frontend/src/ts/test/test-config.ts
View file

@ -42,10 +42,10 @@ export function hide(): void {
);
}
export function update(
export async function update(
previous: MonkeyTypes.Mode,
current: MonkeyTypes.Mode
): void {
): Promise<void> {
if (previous === current) return;
$("#testConfig .mode .textButton").removeClass("active");
$("#testConfig .mode .textButton[mode='" + current + "']").addClass("active");
@ -78,6 +78,8 @@ export function update(
zen: "zen",
};
const animTime = 250;
const puncAndNumVisible = {
time: true,
words: true,
@ -86,14 +88,52 @@ export function update(
zen: false,
};
// const animTime = 250;
if (puncAndNumVisible[current]) {
$("#testConfig .puncAndNum").removeClass("scrolled");
} else {
$("#testConfig .puncAndNum").addClass("scrolled");
}
if (
puncAndNumVisible[previous] == false &&
puncAndNumVisible[current] == true
) {
//show
$("#testConfig .puncAndNum")
.css({
opacity: 0,
maxWidth: 0,
})
.animate(
{
opacity: 1,
maxWidth: "13rem",
},
animTime,
"easeInOutSine"
);
} else if (
puncAndNumVisible[previous] == true &&
puncAndNumVisible[current] == false
) {
//hide
$("#testConfig .puncAndNum")
.css({
opacity: 1,
maxWidth: "13rem",
})
.animate(
{
opacity: 1,
maxWidth: "0",
},
animTime,
"easeInOutSine"
);
}
// const currentWidth = Math.round(
// document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
// 0
@ -115,10 +155,91 @@ export function update(
// $("#testConfig .rightSpacer").removeClass("hidden");
// }
const previousWidth = Math.round(
document
.querySelector(`#testConfig .${submenu[previous]}`)
?.getBoundingClientRect().width ?? 0
);
$(`#testConfig .${submenu[previous]}`).addClass("hidden");
$(`#testConfig .${submenu[current]}`).removeClass("hidden");
const currentWidth = Math.round(
document
.querySelector(`#testConfig .${submenu[current]}`)
?.getBoundingClientRect().width ?? 0
);
$(`#testConfig .${submenu[previous]}`).removeClass("hidden");
$(`#testConfig .${submenu[current]}`).addClass("hidden");
const widthDifference = currentWidth - previousWidth;
const widthStep = widthDifference / 2;
$(`#testConfig .${submenu[previous]}`)
.css({
opacity: 1,
width: previousWidth,
})
.animate(
{
width: previousWidth + widthStep,
opacity: 0,
},
animTime / 2,
"easeInSine",
() => {
$(`#testConfig .${submenu[previous]}`)
.css({
opacity: 1,
width: "unset",
})
.addClass("hidden");
$(`#testConfig .${submenu[current]}`)
.css({
opacity: 0,
width: previousWidth + widthStep,
})
.removeClass("hidden")
.animate(
{
opacity: 1,
width: currentWidth,
},
animTime / 2,
"easeOutSine",
() => {
$(`#testConfig .${submenu[current]}`).css("width", "unset");
}
);
}
);
console.log(previousWidth);
// $(`#testConfig .${submenu[current]}`)
// .css({
// opacity: 0,
// maxWidth: previousWidth,
// })
// .removeClass("hidden")
// .animate(
// {
// maxWidth: currentWidth,
// opacity: 1,
// },
// 250,
// () => {
// $(`#testConfig .${submenu[current]}`).css({
// opacity: 1,
// maxWidth: "unset",
// });
// }
// );
// const newWidth = Math.round(
// document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
// 0