Disable will-change CSS property (#75)

* Disable will-change CSS property * Add story for will-change
oblador · Nov 9, 2018 · b517eaa · b517eaa
1 parent 7d0695f
commit b517eaa
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 0 deletions.
diff --git a/...reference/chrome_a4_Animation_with_CSS_transition_with_will_change_property.png b/...reference/chrome_a4_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/...ence/chrome_iphone7_Animation_with_CSS_transition_with_will_change_property.png b/...ence/chrome_iphone7_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/...rence/chrome_laptop_Animation_with_CSS_transition_with_will_change_property.png b/...rence/chrome_laptop_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/examples/react/src/AnimatedComponent.css b/examples/react/src/AnimatedComponent.css
@@ -14,6 +14,10 @@
  transform: rotate(360deg);
 }
 
+.CSSTransition-will-change {
+ will-change: transform;
+}
+
 .CSSAnimation {
  animation: 1.5s AnimatedComponent-spin infinite normal linear;
 }

diff --git a/examples/react/src/AnimatedComponent.js b/examples/react/src/AnimatedComponent.js
@@ -33,6 +33,14 @@ export const CSSTransition = withAlternatingState(({ on }) => (
  />
 ));
 
+export const CSSTransitionWillChange = withAlternatingState(({ on }) => (
+ <div
+ className={`AnimatedComponent CSSTransition CSSTransitionWillChange ${
+ on ? 'CSSTransition-on' : ''
+ }`}
+ />
+));
+
 export const CSSAnimation = () => (
  <div className="AnimatedComponent CSSAnimation" />
 );

diff --git a/examples/react/stories/index.js b/examples/react/stories/index.js
@@ -47,6 +47,9 @@ storiesOf('Asynchronous render', module)
 
 storiesOf('Animation', module)
  .add('with CSS transition', () => <AnimatedComponent.CSSTransition />)
+ .add('with CSS transition with will-change property', () => (
+ <AnimatedComponent.CSSTransitionWillChange />
+ ))
  .add('with CSS animation', () => <AnimatedComponent.CSSAnimation />)
  .add('with react-motion', () => <AnimatedComponent.ReactMotion />);
 

diff --git a/src/targets/chrome/disable-animations.js b/src/targets/chrome/disable-animations.js
@@ -7,6 +7,7 @@ const disableAnimations = window => {
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
+ will-change: auto !important;
  }
  `;