fix(zoomin): fix zoom in animation

vault-developer · vault-developer · commit a00671cdf69f · 2025-01-26T10:53:18.000+01:00
diff --git a/src/emotion.d.ts b/src/emotion.d.ts
@@ -7,7 +7,12 @@ declare module '@emotion/react' {
 			breakpoints: {
 				desktop: number;
 			};
-			colorTransition: string;
+			transitions: {
+				color: string;
+			};
+			animations: {
+				zoomIn: string;
+			};
 			widths: {
 				eventLoopRadius: number;
 				eventLoopDiameter: number;
diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts
@@ -62,8 +62,8 @@ export const BaseLayoutElement = styled.div(
 		border: 1px solid ${theme.custom.colors.onContainer.dim};
 		background: ${theme.custom.colors.container};
 		transition:
-			background-color ${theme.custom.colorTransition},
-			border-color ${theme.custom.colorTransition};
+			background-color ${theme.custom.transitions.color},
+			border-color ${theme.custom.transitions.color};
 		margin: 0;
 		padding: 10px;
 	`
diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts
@@ -13,7 +13,8 @@ export const Callstack = styled.div`
 export const CallstackElement = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
diff --git a/src/pages/home/sections/Callstack/Callstack.tsx b/src/pages/home/sections/Callstack/Callstack.tsx
@@ -1,7 +1,6 @@
 import * as Styled from './Callstack.styled.ts';
 import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 import CallStackModal from './Callstack.modal.tsx';
 import { useQueueManagerStore } from 'store/store.ts';
@@ -16,9 +15,7 @@ function CallStack({ className }: { className?: string }) {
 			<Styled.Callstack>
 				<InfoIcon onClick={toggle} />
 				{tasks.map((task) => (
-					<Zoom in key={task}>
-						<Styled.CallstackElement>{task}</Styled.CallstackElement>
-					</Zoom>
+					<Styled.CallstackElement key={task}>{task}</Styled.CallstackElement>
 				))}
 				<CallStackModal isOpened={isOpened} toggle={toggle} />
 			</Styled.Callstack>
diff --git a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts
@@ -7,29 +7,29 @@ export const EditorWrapper = styled.div(
 
 		.ace_layer.ace_gutter-layer {
 			background: ${theme.custom.colors.container};
-			transition: background-color ${theme.custom.colorTransition};
+			transition: background-color ${theme.custom.transitions.color};
 		}
 
 		.ace_gutter {
 			background: ${theme.custom.colors.onContainer.dim};
-			transition: background-color ${theme.custom.colorTransition};
+			transition: background-color ${theme.custom.transitions.color};
 		}
 
 		.selected_lines {
 			position: absolute;
 			background: ${theme.custom.colors.tertiary.normal};
-			transition: background-color ${theme.custom.colorTransition};
+			transition: background-color ${theme.custom.transitions.color};
 			opacity: 0.3;
 		}
 
 		.ace_gutter-active-line {
 			background: ${theme.custom.colors.onContainer.dim};
-			transition: background-color ${theme.custom.colorTransition};
+			transition: background-color ${theme.custom.transitions.color};
 		}
 
 		.ace_content {
 			background: ${theme.custom.colors.container};
-			transition: background-color ${theme.custom.colorTransition};
+			transition: background-color ${theme.custom.transitions.color};
 		}
 	`
 );
diff --git a/src/pages/home/sections/Console/Console.styled.ts b/src/pages/home/sections/Console/Console.styled.ts
@@ -12,7 +12,8 @@ export const LogQueue = styled.div`
 export const Log = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
diff --git a/src/pages/home/sections/Console/Console.tsx b/src/pages/home/sections/Console/Console.tsx
@@ -1,6 +1,5 @@
 import { useQueueManagerStore } from 'store/store.ts';
 import * as Styled from './Console.styled.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 
 function Console({ className }: { className?: string }) {
@@ -11,9 +10,7 @@ function Console({ className }: { className?: string }) {
 			<span>Console</span>
 			<Styled.LogQueue>
 				{tasks.map((log, i) => (
-					<Zoom in key={log + i}>
-						<Styled.Log>{log}</Styled.Log>
-					</Zoom>
+					<Styled.Log key={log + i}>{log}</Styled.Log>
 				))}
 			</Styled.LogQueue>
 		</List>
diff --git a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts
@@ -16,10 +16,10 @@ export const SVGContainer = styled.svg(
 		text,
 		circle {
 			transition:
-				background-color ${theme.custom.colorTransition},
-				color ${theme.custom.colorTransition},
-				stroke ${theme.custom.colorTransition},
-				fill ${theme.custom.colorTransition};
+				background-color ${theme.custom.transitions.color},
+				color ${theme.custom.transitions.color},
+				stroke ${theme.custom.transitions.color},
+				fill ${theme.custom.transitions.color};
 		}
 	`
 );
diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts
@@ -12,7 +12,8 @@ export const MicroTasksQueue = styled.div`
 export const MicroTask = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx
@@ -2,7 +2,6 @@ import { useQueueManagerStore } from 'store/store.ts';
 import * as Styled from './MicroTasksQueue.styled.ts';
 import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 import MicroTasksQueueModal from './MicroTasksQueue.modal.tsx';
 
@@ -16,9 +15,7 @@ function MicroTasksQueue({ className }: { className?: string }) {
 			<Styled.MicroTasksQueue>
 				<InfoIcon onClick={toggle} />
 				{tasks.map((task) => (
-					<Zoom in key={task}>
-						<Styled.MicroTask>{task}</Styled.MicroTask>
-					</Zoom>
+					<Styled.MicroTask key={task}>{task}</Styled.MicroTask>
 				))}
 				<MicroTasksQueueModal isOpened={isOpened} toggle={toggle} />
 			</Styled.MicroTasksQueue>
diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts
@@ -12,7 +12,8 @@ export const CallbacksQueue = styled.div`
 export const Callback = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx
@@ -1,7 +1,6 @@
 import * as Styled from './RequestAnimationFrameQueue.styled.ts';
 import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 import RequestAnimationFrameQueueModal from './RequestAnimationFrameQueue.modal.tsx';
 import { useQueueManagerStore } from 'store/store.ts';
@@ -16,9 +15,7 @@ function RequestAnimationFrameQueue({ className }: { className?: string }) {
 			<Styled.CallbacksQueue>
 				<InfoIcon onClick={toggle} />
 				{callbacks.map((callback) => (
-					<Zoom in key={callback}>
-						<Styled.Callback>{callback}</Styled.Callback>
-					</Zoom>
+					<Styled.Callback key={callback}>{callback}</Styled.Callback>
 				))}
 				<RequestAnimationFrameQueueModal isOpened={isOpened} toggle={toggle} />
 			</Styled.CallbacksQueue>
diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts
@@ -12,7 +12,8 @@ export const TasksQueue = styled.div`
 export const Task = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.tsx b/src/pages/home/sections/TasksQueue/TasksQueue.tsx
@@ -2,7 +2,6 @@ import { useQueueManagerStore } from 'store/store.ts';
 import * as Styled from './TasksQueue.styled.ts';
 import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 import TasksQueueModal from './TasksQueue.modal.tsx';
 
@@ -16,9 +15,7 @@ function TasksQueue({ className }: { className?: string }) {
 			<Styled.TasksQueue>
 				<InfoIcon onClick={toggle} />
 				{tasks.map((task) => (
-					<Zoom in key={task}>
-						<Styled.Task>{task}</Styled.Task>
-					</Zoom>
+					<Styled.Task key={task}>{task}</Styled.Task>
 				))}
 				<TasksQueueModal isOpened={isOpened} toggle={toggle} />
 			</Styled.TasksQueue>
diff --git a/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx b/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx
@@ -2,7 +2,6 @@ import WebApiTask from './WebApiTask.tsx';
 import * as Styled from './WebApiQueue.styled.ts';
 import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { Zoom } from '@mui/material';
 import { List } from '../../Home.styled.ts';
 import WebApiQueueModal from './WebApiQueue.modal.tsx';
 import { useQueueManagerStore } from 'store/store.ts';
@@ -17,9 +16,7 @@ function WebApiQueue({ className }: { className?: string }) {
 			<Styled.WebApiQueue>
 				<InfoIcon onClick={toggle} />
 				{tasks.map((task) => (
-					<Zoom in key={task.value}>
-						<WebApiTask task={task} />
-					</Zoom>
+					<WebApiTask key={task.value} task={task} />
 				))}
 				<WebApiQueueModal isOpened={isOpened} toggle={toggle} />
 			</Styled.WebApiQueue>
diff --git a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts
@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 export const WebApiItem = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
 		border-radius: 5px;
 		padding: 10px;
 		position: absolute;
@@ -27,6 +27,8 @@ export const Progress = styled.div<{ progress: number }>(
 			${theme.custom.colors.onContainer.contrast} ${progress}%,
 			transparent ${progress}%
 		);
+		transition: background-color ${theme.custom.transitions.color};
+		animation: ${theme.custom.animations.zoomIn};
 		border-radius: 5px;
 		position: relative;
 		padding: 10px;
diff --git a/src/providers/StylesProvider.utils.ts b/src/providers/StylesProvider.utils.ts
@@ -10,7 +10,7 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 
 	body {
 		background-color: ${theme.custom.colors.background};
-		transition: background-color ${theme.custom.colorTransition};
+		transition: background-color ${theme.custom.transitions.color};
 	}
 
 	div,
@@ -31,7 +31,7 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 
 	a {
 		color: ${theme.custom.colors.onBackground};
-		transition: all ${theme.custom.colorTransition};
+		transition: all ${theme.custom.transitions.color};
 	}
 
 	body {
@@ -68,4 +68,15 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 	:focus-visible {
 		outline: 2px solid ${theme.custom.colors.onContainer.normal};
 	}
+
+	@keyframes zoomIn {
+		0% {
+			transform: scale(0);
+			opacity: 0;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
 `;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -70,7 +70,12 @@ export const getTheme = (cs: ColorsSystem): Theme => {
 			breakpoints: {
 				desktop: 768,
 			},
-			colorTransition: '1s ease',
+			transitions: {
+				color: '1s ease',
+			},
+			animations: {
+				zoomIn: 'zoomIn 225ms cubic-bezier(0.4, 0, 0.2, 1)',
+			},
 			widths: {
 				eventLoopRadius: 150,
 				eventLoopDiameter: 300,

Original file line number	Diff line number	Diff line change
`@@ -7,29 +7,29 @@ export const EditorWrapper = styled.div(`
`7`	`7`
`8`	`8`	`.ace_layer.ace_gutter-layer {`
`9`	`9`	`background: ${theme.custom.colors.container};`
`10`		`- transition: background-color ${theme.custom.colorTransition};`
	`10`	`+ transition: background-color ${theme.custom.transitions.color};`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.ace_gutter {`
`14`	`14`	`background: ${theme.custom.colors.onContainer.dim};`
`15`		`- transition: background-color ${theme.custom.colorTransition};`
	`15`	`+ transition: background-color ${theme.custom.transitions.color};`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.selected_lines {`
`19`	`19`	`position: absolute;`
`20`	`20`	`background: ${theme.custom.colors.tertiary.normal};`
`21`		`- transition: background-color ${theme.custom.colorTransition};`
	`21`	`+ transition: background-color ${theme.custom.transitions.color};`
`22`	`22`	`opacity: 0.3;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.ace_gutter-active-line {`
`26`	`26`	`background: ${theme.custom.colors.onContainer.dim};`
`27`		`- transition: background-color ${theme.custom.colorTransition};`
	`27`	`+ transition: background-color ${theme.custom.transitions.color};`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.ace_content {`
`31`	`31`	`background: ${theme.custom.colors.container};`
`32`		`- transition: background-color ${theme.custom.colorTransition};`
	`32`	`+ transition: background-color ${theme.custom.transitions.color};`
`33`	`33`	`}`
`34`	`34`	`
`35`	`35`	`);`