andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DetailsPanel: smooth panel transitions to eliminate bounce

Browse Source
This commit is contained in:
rektdeckard
2021-03-13 12:29:57 -05:00
parent 2ba5ac332b
commit dc6764e387
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/IconGrid/DetailsPanel.tsx
View File

@@ -22,20 +22,20 @@ const panelVariants = {
height: "100%", height: "100%",
marginTop: "4px", marginTop: "4px",
marginBottom: "4px", marginBottom: "4px",
// transition: { stiffness: 600, damping: 32, duration: 0.2 }, transition: { type: "tween", duration: 0.1 },
}, },
collapsed: { collapsed: {
opacity: 0, opacity: 0,
height: "0px", height: "0px",
marginTop: "0px", marginTop: "0px",
marginBottom: "0px", marginBottom: "0px",
// transition: { stiffness: 600, damping: 32, duration: 0.2 }, transition: { type: "tween", duration: 0.1 },
}, },
}; };
const contentVariants = { const contentVariants = {
open: { opacity: 1, transition: { duration: 0.2 } }, open: { opacity: 1, transition: { duration: 0.2, delay: 0.1 } },
collapsed: { opacity: 0, transition: { duration: 0.1 } }, collapsed: { opacity: 0, transition: { duration: 0 } },
}; };
const buttonColor = "#35313D"; const buttonColor = "#35313D";