From 4f964fedc6533fa9a4e0a5e04f018f8379278191 Mon Sep 17 00:00:00 2001 From: malangcat Date: Tue, 7 Jan 2025 20:32:57 +0900 Subject: [PATCH] cleanup css --- .../qvism-preset/src/app-screen.recipe.ts | 192 +++++++++++------- packages/stylesheet/appScreen.css | 24 ++- 2 files changed, 128 insertions(+), 88 deletions(-) diff --git a/packages/qvism-preset/src/app-screen.recipe.ts b/packages/qvism-preset/src/app-screen.recipe.ts index aaeb50a93..51e95a7d0 100644 --- a/packages/qvism-preset/src/app-screen.recipe.ts +++ b/packages/qvism-preset/src/app-screen.recipe.ts @@ -19,14 +19,6 @@ const FadeOutToBottomAndroid = { timingFunction: "linear", }; -const transform = ({ - translateX = "0", - translateY = "0", -}: { - translateX?: string; - translateY?: string; -}) => `translate3d(${translateX}, ${translateY}, 0)`; - const push = "[data-global-transition-state=enter-active] &[data-activity-is-top]"; const pop = "[data-global-transition-state=exit-active] &[data-activity-is-top]"; const idle = "[data-global-transition-state=enter-done] &[data-activity-is-top]"; @@ -36,12 +28,107 @@ const idleBehind = "[data-global-transition-state=enter-done] &:not([data-activi const swipeBackSwiping = "[data-swipe-back-state=swiping] &[data-activity-is-top]"; const swipeBackSwipingBehind = "[data-swipe-back-state=swiping] &:not([data-activity-is-top])"; -const slideFromRightIOS = { - outsideOffsetX: "100%", - behindOffsetX: "-30%", - swipeBackDisplacement: "var(--swipe-back-displacement, 0)", - swipeBackDisplacementBehind: "calc((var(--swipe-back-displacement, 0) - 1) * 0.3)", - swipeBackDisplacementRatio: "var(--swipe-back-displacement-ratio, 0)", +interface TransformProps { + translateX?: string; + translateY?: string; + opacity?: string; +} + +function translate3d({ translateX = "0", translateY = "0" }: TransformProps) { + return `translate3d(${translateX}, ${translateY}, 0)`; +} + +function transform({ translateX, translateY, opacity }: TransformProps) { + return { + transform: translateX || translateY ? translate3d({ translateX, translateY }) : undefined, + opacity, + }; +} + +function createPresence(config: { duration: string; timingFunction: string }) { + function enter(from: TransformProps, to: TransformProps) { + return { + ...enterAnimation({ ...config, ...from }), + ...transform(to), + }; + } + + function exit(from: TransformProps, to: TransformProps) { + return { + ...transform(from), + ...exitAnimation({ ...config, ...to }), + }; + } + + return { enter, exit }; +} + +const iOSPresence = createPresence(TransitionIOS); + +function getIOSAnimations(props: { + in: TransformProps; + swipe: TransformProps; + out: TransformProps; + gravity?: "in" | "out"; +}) { + const gravity = props.gravity || "in"; + const animations = + gravity === "in" + ? { + push: iOSPresence.enter(props.out, props.in), + idle: iOSPresence.enter(props.swipe, props.in), + pop: iOSPresence.exit(props.swipe, props.out), + } + : { + push: iOSPresence.exit(props.in, props.out), + idle: iOSPresence.exit(props.swipe, props.out), + pop: iOSPresence.enter(props.swipe, props.in), + }; + + return { + ...animations, + swipeBackSwiping: { + animation: "none", // remove animation while swiping, so that animation re-run on idle or pop + ...transform(props.swipe), // while swiping back, set swiping position + }, + }; +} + +const iOSAnimations = { + translate: getIOSAnimations({ + in: { + translateX: "0", + }, + swipe: { + translateX: "var(--swipe-back-displacement, 0)", + }, + out: { + translateX: "100%", + }, + }), + translateBehind: getIOSAnimations({ + in: { + translateX: "0", + }, + swipe: { + translateX: "calc(-30% + var(--swipe-back-displacement, 0) * 0.3)", + }, + out: { + translateX: "-30%", + }, + gravity: "out", + }), + opacity: getIOSAnimations({ + in: { + opacity: "1", + }, + swipe: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + }, + out: { + opacity: "0", + }, + }), }; export const appScreen = defineRecipe({ @@ -124,76 +211,23 @@ export const appScreen = defineRecipe({ layer: { transform: "translate3d(0, 0, 0)", // top - [push]: enterAnimation({ - ...TransitionIOS, - translateX: "100%", - }), - [pop]: { - transform: transform({ - translateX: "var(--swipe-back-displacement, 0)", - }), - ...exitAnimation({ - ...TransitionIOS, - translateX: "100%", - }), - }, - [idle]: enterAnimation({ - ...TransitionIOS, - translateX: "var(--swipe-back-displacement, 0)", - }), - [swipeBackSwiping]: { - animation: "none", - transform: transform({ - translateX: "var(--swipe-back-displacement, 0)", - }), - }, + [push]: iOSAnimations.translate.push, + [pop]: iOSAnimations.translate.pop, + [idle]: iOSAnimations.translate.idle, + [swipeBackSwiping]: iOSAnimations.translate.swipeBackSwiping, // behind - [popBehind]: enterAnimation({ - ...TransitionIOS, - translateX: "calc(-30% + var(--swipe-back-displacement, 0) * 0.3)", - }), - [pushBehind]: exitAnimation({ - ...TransitionIOS, - translateX: "-30%", - }), - [idleBehind]: { - transform: transform({ - translateX: "calc(-30% + var(--swipe-back-displacement, 0) * 0.3)", - }), - ...exitAnimation({ - ...TransitionIOS, - translateX: "-30%", - }), - }, - [swipeBackSwipingBehind]: { - animation: "none", - transform: transform({ - translateX: "calc(-30% + var(--swipe-back-displacement, 0) * 0.3)", - }), - }, + [pushBehind]: iOSAnimations.translateBehind.push, + [popBehind]: iOSAnimations.translateBehind.pop, + [idleBehind]: iOSAnimations.translateBehind.idle, + [swipeBackSwipingBehind]: iOSAnimations.translateBehind.swipeBackSwiping, }, dim: { opacity: 1, - [push]: enterAnimation({ - ...TransitionIOS, - opacity: "0", - }), - [pop]: { - opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", - ...exitAnimation({ - ...TransitionIOS, - opacity: "0", - }), - }, - [idle]: enterAnimation({ - ...TransitionIOS, - opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", - }), - [swipeBackSwiping]: { - animation: "none", - opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", - }, + [push]: iOSAnimations.opacity.push, + [pop]: iOSAnimations.opacity.pop, + [idle]: iOSAnimations.opacity.idle, + [swipeBackSwiping]: iOSAnimations.opacity.swipeBackSwiping, }, }, fadeFromBottomAndroid: { diff --git a/packages/stylesheet/appScreen.css b/packages/stylesheet/appScreen.css index 5c16943cc..9f260d590 100644 --- a/packages/stylesheet/appScreen.css +++ b/packages/stylesheet/appScreen.css @@ -73,6 +73,7 @@ --seed-enter-translate-y: 0; --seed-enter-opacity: 1; --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); } [data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); @@ -93,21 +94,14 @@ --seed-enter-translate-y: 0; --seed-enter-opacity: 1; --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); } [data-swipe-back-state=swiping] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { animation: none; transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); } -[data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { - animation: seed-enter; - animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); - animation-duration: 300ms; - --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * 0.3); - --seed-enter-translate-y: 0; - --seed-enter-opacity: 1; - --seed-enter-scale: 1; -} [data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(0, 0, 0); animation: seed-exit; animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); animation-duration: 300ms; @@ -117,6 +111,16 @@ --seed-exit-opacity: 1; --seed-exit-scale: 1; } +[data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * 0.3); + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); +} [data-global-transition-state=enter-done] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0); animation: seed-exit; @@ -143,6 +147,7 @@ --seed-enter-translate-y: 0; --seed-enter-opacity: 0; --seed-enter-scale: 1; + opacity: 1; } [data-global-transition-state=exit-active] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); @@ -163,6 +168,7 @@ --seed-enter-translate-y: 0; --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); --seed-enter-scale: 1; + opacity: 1; } [data-swipe-back-state=swiping] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { animation: none;