Enhance Transition Effects in App.css and DashboardSidebarSplitter
- Updated transition timing functions in App.css for smoother animations, replacing 'ease-in-out' with a custom cubic-bezier curve. - Increased the sidebar size transition duration in DashboardSidebarSplitter from 150ms to 300ms for improved user experience during resizing. - Refactored transition properties for the dashboard splitter to ensure consistent animation behavior across components.
This commit is contained in:
parent
4ca7ecbb6a
commit
4f6b7e253b
@ -505,7 +505,7 @@ body {
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
transition:
|
||||
all 0.3s,
|
||||
all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
|
||||
background 0s;
|
||||
}
|
||||
|
||||
@ -1108,11 +1108,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
|
||||
.farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning
|
||||
.ant-splitter-panel {
|
||||
transition:
|
||||
--dashboard-splitter-sidebar-size 0.3s ease-in-out,
|
||||
flex-basis 0.3s ease-in-out,
|
||||
width 0.3s ease-in-out,
|
||||
min-width 0.3s ease-in-out,
|
||||
max-width 0.3s ease-in-out;
|
||||
--dashboard-splitter-sidebar-size 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
|
||||
flex-basis 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
|
||||
width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
|
||||
min-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
|
||||
max-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
}
|
||||
|
||||
@property --dashboard-splitter-sidebar-size {
|
||||
|
||||
@ -18,7 +18,7 @@ const MAX_SIDEBAR_PX = 400
|
||||
const COLLAPSED_WIDTH_PX = 80
|
||||
const ELECTRON_COLLAPSED_WIDTH_PX = 55
|
||||
const EXPAND_DRAG_PX = 10
|
||||
const SIZE_TRANSITION_MS = 150
|
||||
const SIZE_TRANSITION_MS = 300
|
||||
const COLLAPSE_STORAGE_KEY = 'DashboardSidebar_collapseState'
|
||||
const SIZE_STORAGE_KEY = 'DashboardSidebar_width'
|
||||
|
||||
@ -264,12 +264,7 @@ const DashboardSidebarSplitter = ({ sidebar, children }) => {
|
||||
setSidebarSize(size)
|
||||
lastExpandedSizeRef.current = clampExpandedSize(size)
|
||||
},
|
||||
[
|
||||
collapseSidebar,
|
||||
collapsedWidth,
|
||||
expandSidebar,
|
||||
lockResizeUntilPointerUp
|
||||
]
|
||||
[collapseSidebar, collapsedWidth, expandSidebar, lockResizeUntilPointerUp]
|
||||
)
|
||||
|
||||
const handleResizeEnd = useCallback(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user