[Slide] Fix double negation in CSS translate (#21115)

mui · May 19, 2020 · ee5c39e · ee5c39e
1 parent 8357c68
commit ee5c39e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
@@ -36,15 +36,15 @@ function getTranslateValue(direction, node) {
   }
 
   if (direction === 'left') {
-    return `translateX(${window.innerWidth}px) translateX(-${rect.left - offsetX}px)`;
+    return `translateX(${window.innerWidth}px) translateX(${offsetX - rect.left}px)`;
   }
 
   if (direction === 'right') {
     return `translateX(-${rect.left + rect.width - offsetX}px)`;
   }
 
   if (direction === 'up') {
-    return `translateY(${window.innerHeight}px) translateY(-${rect.top - offsetY}px)`;
+    return `translateY(${window.innerHeight}px) translateY(${offsetY - rect.top}px)`;
   }
 
   // direction === 'down'

diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js
@@ -185,6 +185,7 @@ describe('<Slide />', () => {
               right: 800,
               top: 200,
               bottom: 500,
+              ...props.rect,
             }));
           } catch (error) {
             // already stubbed
@@ -291,6 +292,48 @@ describe('<Slide />', () => {
 
         expect(nodeEnterTransformStyle).to.equal('translateX(-800px)');
       });
+
+      it('should set element transform in the `up` direction when element is offscreen', () => {
+        const childRef = React.createRef();
+        let nodeEnterTransformStyle;
+        const wrapper = mount(
+          <Slide
+            direction="up"
+            onEnter={(node) => {
+              nodeEnterTransformStyle = node.style.transform;
+            }}
+          >
+            <FakeDiv rect={{ top: -100 }} ref={childRef} />
+          </Slide>,
+        );
+
+        wrapper.setProps({ in: true });
+
+        expect(nodeEnterTransformStyle).to.equal(
+          `translateY(${global.innerHeight}px) translateY(100px)`,
+        );
+      });
+
+      it('should set element transform in the `left` direction when element is offscreen', () => {
+        const childRef = React.createRef();
+        let nodeEnterTransformStyle;
+        const wrapper = mount(
+          <Slide
+            direction="left"
+            onEnter={(node) => {
+              nodeEnterTransformStyle = node.style.transform;
+            }}
+          >
+            <FakeDiv rect={{ left: -100 }} ref={childRef} />
+          </Slide>,
+        );
+
+        wrapper.setProps({ in: true });
+
+        expect(nodeEnterTransformStyle).to.equal(
+          `translateX(${global.innerWidth}px) translateX(100px)`,
+        );
+      });
     });
 
     describe('handleExiting()', () => {