fix: icon button transition happening when undesired (#313)

fix: icon button transition
reearth · Sep 8, 2022 · 6a6d98e · 6a6d98e
1 parent 893d32f
commit 6a6d98e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
@@ -123,7 +123,8 @@ const StyledButton = styled.button<ButtonProps>`
   align-items: center;
   display: flex;
   align-items: center;
-  transition: all 0.4s;
+  transition-property: color, background;
+  transition-duration: 0.4s;
 
   &:hover {
     background: ${({ buttonType, disabled, theme }) =>

diff --git a/src/components/atoms/Icon/index.tsx b/src/components/atoms/Icon/index.tsx
@@ -84,7 +84,8 @@ const StyledSvg = styled(SVG)<{ color?: string; size?: string; notransition?: bo
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   color: ${({ color }) => color};
-  ${({ notransition }) => !notransition && "transition: all 0.4s;"}
+  transition-property: color, background;
+  ${({ notransition }) => (!notransition ? "transition-duration: 0.4s;" : undefined)}
 `;
 
 export default memo(Icon);