perf: optimize animation with will-change (#177)

* perf: optimize animation with will-change * test: update snapshot
microlinkhq · Jan 28, 2020 · dde1aff · dde1aff
1 parent 1ee61c6
commit dde1aff
Show file tree

Hide file tree

Showing 7 changed files with 1,123 additions and 502 deletions.
diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
@@ -83,6 +83,7 @@ const Footer = styled('footer').attrs({ className: classNames.url })`
 const Author = styled(CardText)`
   opacity: 0.75;
   transition: opacity ${transition.medium};
+  will-change: opacity;
 
   .${classNames.main}:hover & {
     opacity: 1;
@@ -95,6 +96,7 @@ const PoweredBy = styled('span').attrs({ title: 'microlink.io' })`
   display: block;
   margin-left: 15px;
   transition: filter ${transition.medium}, opacity ${transition.medium};
+  will-change: filter, opacity;
   &:not(:hover) {
     filter: grayscale(100%);
     opacity: 0.75;

diff --git a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
@@ -41,6 +41,7 @@ const BottomControls = styled('div')`
   justify-content: center;
   align-items: center;
   transition: opacity ${transition.medium};
+  will-change: opacity;
 
   .${classNames.main}:not(:hover) & {
     opacity: 0;

diff --git a/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js b/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js
@@ -5,6 +5,7 @@ const MediaButton = styled('div')`
   backface-visibility: hidden;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
   transition: transform ${transition.short};
+  will-change: transform;
 
   > svg {
     display: block;

diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar.js
@@ -22,7 +22,8 @@ const ProgressBar = styled('div').attrs(({ progress }) => ({
   bottom: 0;
   background: #e1e8ed;
   height: ${props => getProgressBarSize(props)}px;
-  transition: opacity ${transition.medium}, background ${transition.medium};
+  transition: background ${transition.medium};
+  will-change: background;
 
   .${classNames.main}:hover & {
     background: #fff;

diff --git a/packages/react/src/components/Card/CardMedia/Controls/index.js b/packages/react/src/components/Card/CardMedia/Controls/index.js
@@ -22,6 +22,7 @@ const OuterWrap = styled('div').attrs({ className: classNames.mediaControls })`
   right: 0;
   bottom: 0;
   transition: background ${transition.long};
+  will-change: background;
 
   .${classNames.main}:hover & {
     background: rgba(0, 0, 0, 0.35);
@@ -39,6 +40,7 @@ const InnerWrap = styled('div')`
   justify-content: center;
   z-index: 2;
   transition: opacity ${transition.medium};
+  will-change: opacity;
 
   .${classNames.main}:not(:hover) & {
     opacity: ${({ opacity = 0 }) => opacity};

diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js
@@ -11,6 +11,7 @@ const contrastStyle = ({ backgroundColor, color }) => css`
   background-color: ${backgroundColor};
   border-color: ${color};
   transition-property: filter;
+  will-change: filter;
 
   &&& {
     color: ${color};
@@ -24,15 +25,14 @@ const contrastStyle = ({ backgroundColor, color }) => css`
 const largeStyle = css`
   flex-direction: column;
   height: ${HEIGHT};
-  transition-property: background, border-color, height;
-
   ${media.mobile`
     height: calc(${HEIGHT} * 7/9);
   `};
 `
 
 const hoverStyle = css`
   transition-property: background, border-color;
+  will-change: background, border-color;
   &:hover {
     background: #f5f8fa;
     border-color: rgba(136, 153, 166, 0.5);