Skip to content

Commit

Permalink
cleanup css
Browse files Browse the repository at this point in the history
  • Loading branch information
@malangcat
malangcat committed Jan 7, 2025
1 parent c32bd5c commit 4f964fe
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 88 deletions.
192 changes: 113 additions & 79 deletions packages/qvism-preset/src/app-screen.recipe.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]";
Expand All @@ -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({
Expand Down Expand Up @@ -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: {
Expand Down
24 changes: 15 additions & 9 deletions packages/stylesheet/appScreen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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));
Expand All @@ -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;
Expand Down

0 comments on commit 4f964fe

Please sign in to comment.