perf(ui): reduce animations which slow down reactflow

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx

@@ -8,8 +8,6 @@ const sx = {
   minH: 8,
   py: 0.5,
   alignItems: 'center',
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
   w: 'full',
   h: 'full',
 } satisfies SystemStyleObject;

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx

@@ -8,8 +8,6 @@ const sx = {
   minH: 8,
   py: 0.5,
   alignItems: 'center',
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
   justifyContent: 'flex-end',
 } satisfies SystemStyleObject;
 

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx

@@ -32,7 +32,7 @@ const NodeCollapseButton = ({ nodeId, isOpen }: Props) => {
         <Icon
           as={PiCaretUpBold}
           transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
-          transitionProperty="common"
+          transitionProperty="transform"
           transitionDuration="normal"
         />
       }

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -23,8 +23,7 @@ const containerSx: SystemStyleObject = {
   h: 'full',
   position: 'relative',
   borderRadius: 'base',
-  transitionProperty: 'common',
-  transitionDuration: '0.1s',
+  transitionProperty: 'none',
   cursor: 'grab',
 };
 
@@ -48,8 +47,7 @@ const inProgressSx: SystemStyleObject = {
   insetInlineStart: 0,
   borderRadius: 'md',
   pointerEvents: 'none',
-  transitionProperty: 'common',
-  transitionDuration: '0.1s',
+  transitionProperty: 'none',
   opacity: 0.7,
   zIndex: -1,
   visibility: 'hidden',
@@ -66,8 +64,7 @@ const selectionOverlaySx: SystemStyleObject = {
   bottom: 0,
   insetInlineStart: 0,
   borderRadius: 'base',
-  transitionProperty: 'common',
-  transitionDuration: '0.1s',
+  transitionProperty: 'none',
   pointerEvents: 'none',
   visibility: 'hidden',
   opacity: 0.5,