Repository: FormidableLabs/spectacle
Pull request #564 (2018-08-08 16:18:26)

Fix nesting
Abstracts the transition out of the user facing slide so that people can use a function/component to render a slide.


Patch:
diff --git a/src/components/manager.js b/src/components/manager.js
index e15170f..c5b065c 100644
--- a/src/components/manager.js
+++ b/src/components/manager.js
@@ -18,6 +18,7 @@ import memoize from 'lodash/memoize';
 
 import Presenter from './presenter';
 import Export from './export';
+import SlideWrapper from './slide-wrapper';
 import Overview from './overview';
 import Magic from './magic';
 
@@ -64,18 +65,6 @@ const StyledTransition = styled(ReactTransitionGroup)({
 export class Manager extends Component {
   static displayName = 'Manager';
 
-  static defaultProps = {
-    autoplay: false,
-    autoplayDuration: 7000,
-    contentWidth: 1000,
-    contentHeight: 700,
-    transition: [],
-    transitionDuration: 500,
-    progress: 'pacman',
-    controls: true,
-    globalStyles: true
-  };
-
   static propTypes = {
     autoplay: PropTypes.bool,
     autoplayDuration: PropTypes.number,
@@ -109,6 +98,18 @@ export class Manager extends Component {
     goToSlide: PropTypes.func
   };
 
+  static defaultProps = {
+    autoplay: false,
+    autoplayDuration: 7000,
+    contentWidth: 1000,
+    contentHeight: 700,
+    transition: [],
+    transitionDuration: 500,
+    progress: 'pacman',
+    controls: true,
+    globalStyles: true
+  };
+
   constructor(props) {
     super(...arguments);
     this._getProgressStyles = this._getProgressStyles.bind(this);
@@ -719,7 +720,7 @@ export class Manager extends Component {
     const slideIndex = this._getSlideIndex();
     const slide = this._getSlideByIndex(slideIndex);
 
-    return cloneElement(slide, {
+    const targetProps = {
       dispatch: this.props.dispatch,
       fragments: this.props.fragment,
       export: this.props.route.params.indexOf('export') !== -1,
@@ -734,7 +735,13 @@ export class Manager extends Component {
         ? slide.props.transitionDuration
         : this.props.transitionDuration,
       slideReference: this.state.slideReference
-    });
+    };
+
+    return (
+      <SlideWrapper key={slideIndex} {...slide.props} {...targetProps}>
+        {cloneElement(slide, { ...slide.props, ...targetProps })}
+      </SlideWrapper>
+    );
   }
   _getProgressStyles() {
     const slideIndex = this._getSlideIndex();
diff --git a/src/components/slide-wrapper.js b/src/components/slide-wrapper.js
new file mode 100644
index 0000000..d5a49e6
--- /dev/null
+++ b/src/components/slide-wrapper.js
@@ -0,0 +1,199 @@
+/* eslint-disable no-invalid-this, max-statements */
+import React from 'react';
+import PropTypes from 'prop-types';
+import isFunction from 'lodash/isFunction';
+
+import { VictoryAnimation } from 'victory-core';
+import findIndex from 'lodash/findIndex';
+
+class SlideWrapper extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.routerCallback = this.routerCallback.bind(this);
+    this.transitionDirection = this.transitionDirection.bind(this);
+    this.getTransitionKeys = this.getTransitionKeys.bind(this);
+    this.getTransitionStyles = this.getTransitionStyles.bind(this);
+    this.getRouteSlideIndex = this.getRouteSlideIndex.bind(this);
+  }
+
+  state = {
+    reverse: false,
+    transitioning: true,
+    z: 1
+  };
+
+  componentWillEnter(callback) {
+    this.setState({ transitioning: false, reverse: false, z: 1 });
+    this.routerCallback(callback);
+  }
+
+  componentWillAppear(callback) {
+    this.setState({ transitioning: false, reverse: false, z: 1 });
+    this.routerCallback(callback);
+  }
+
+  componentWillLeave(callback) {
+    this.setState({ transitioning: true, reverse: true, z: '' });
+    this.routerCallback(callback);
+  }
+
+  routerCallback(callback) {
+    const { transition, transitionDuration } = this.props;
+    if (transition.length > 0) {
+      setTimeout(() => callback(), transitionDuration);
+    } else {
+      callback();
+    }
+  }
+
+  transitionDirection() {
+    const { slideIndex, lastSlideIndex } = this.props;
+    const routeSlideIndex = this.getRouteSlideIndex();
+    return this.state.reverse
+      ? slideIndex > routeSlideIndex
+      : slideIndex > lastSlideIndex;
+  }
+
+  getTransitionKeys() {
+    const {
+      props: { transition = [], transitionIn = [], transitionOut = [] },
+      state: { reverse }
+    } = this;
+    if (reverse && transitionOut.length > 0) {
+      return transitionOut;
+    } else if (transitionIn.length > 0) {
+      return transitionIn;
+    }
+    return transition;
+  }
+
+  // eslint-disable-next-line
+  getTransitionStyles() {
+    const { transitioning, z } = this.state;
+    const transition = this.getTransitionKeys();
+    let styles = { zIndex: z };
+    let transformValue = '';
+
+    if (transition.indexOf('fade') !== -1) {
+      styles = { ...styles, opacity: transitioning ? 0 : 1 };
+    }
+
+    if (transition.indexOf('zoom') !== -1) {
+      transformValue += ` scale(${transitioning ? 0.1 : 1.0})`;
+    }
+
+    if (transition.indexOf('slide') !== -1) {
+      const offset = this.transitionDirection() ? 100 : -100;
+      transformValue += ` translate3d(${transitioning ? offset : 0}%, 0, 0)`;
+    } else {
+      transformValue += ' translate3d(0px, 0px, 0px)';
+    }
+
+    if (transition.indexOf('spin') !== -1) {
+      const angle = this.transitionDirection() ? 90 : -90;
+      transformValue += ` rotateY(${transitioning ? angle : 0}deg)`;
+    }
+
+    const functionStyles = transition.reduce((memo, current) => {
+      if (isFunction(current)) {
+        return {
+          ...memo,
+          ...current(transitioning, this.transitionDirection())
+        };
+      }
+      return memo;
+    }, {});
+
+    return { ...styles, transform: transformValue, ...functionStyles };
+  }
+
+  getRouteSlideIndex() {
+    const { slideReference } = this.props;
+    const { route } = this.context.store.getState();
+    const { slide } = route;
+    const slideIndex = findIndex(slideReference, reference => {
+      return slide === String(reference.id);
+    });
+    return Math.max(0, slideIndex);
+  }
+
+  render() {
+    const { children, transitionDuration } = this.props;
+
+    if (!this.props.viewerScaleMode) {
+      document.documentElement.style.fontSize = `${16 * this.state.zoom}px`;
+    }
+
+    return (
+      <VictoryAnimation
+        data={this.getTransitionStyles()}
+        duration={transitionDuration}
+        easing="quadInOut"
+      >
+        {animatedStyles => (
+          <div
+            style={{
+              ...animatedStyles,
+              transformOrigin: 'center center',
+              position: this.props.export ? 'relative' : 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              overflow: 'hidden',
+              backgroundColor: this.context.styles.global.body.background || ''
+            }}
+          >
+            {children}
+          </div>
+        )}
+      </VictoryAnimation>
+    );
+  }
+}
+
+SlideWrapper.defaultProps = {
+  align: 'center center',
+  presenterStyle: {},
+  style: {},
+  viewerScaleMode: false
+};
+
+SlideWrapper.propTypes = {
+  align: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dispatch: PropTypes.func,
+  export: PropTypes.bool,
+  getAnimStep: PropTypes.func,
+  getAppearStep: PropTypes.func,
+  hash: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  lastSlideIndex: PropTypes.number,
+  margin: PropTypes.number,
+  notes: PropTypes.any,
+  onActive: PropTypes.func,
+  presenterStyle: PropTypes.object,
+  print: PropTypes.bool,
+  slideIndex: PropTypes.number,
+  slideReference: PropTypes.array,
+  style: PropTypes.object,
+  transition: PropTypes.array,
+  transitionDuration: PropTypes.number,
+  transitionIn: PropTypes.array,
+  transitionOut: PropTypes.array,
+  viewerScaleMode: PropTypes.bool
+};
+
+SlideWrapper.contextTypes = {
+  styles: PropTypes.object,
+  contentWidth: PropTypes.number,
+  contentHeight: PropTypes.number,
+  export: PropTypes.bool,
+  print: PropTypes.object,
+  overview: PropTypes.bool,
+  store: PropTypes.object
+};
+
+export default SlideWrapper;
diff --git a/src/components/slide.js b/src/components/slide.js
index 175c205..eb2b147 100644
--- a/src/components/slide.js
+++ b/src/components/slide.js
@@ -4,28 +4,20 @@ import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import isFunction from 'lodash/isFunction';
 import { getStyles } from '../utils/base';
-import { addFragment } from '../actions';
-import stepCounter from '../utils/step-counter';
 import {
-  SlideContainer,
   SlideContent,
+  SlideContainer,
   SlideContentWrapper
 } from './slide-components';
-import { VictoryAnimation } from 'victory-core';
-import findIndex from 'lodash/findIndex';
+import stepCounter from '../utils/step-counter';
+import { addFragment } from '../actions';
 
 class Slide extends React.PureComponent {
   constructor() {
     super(...arguments);
+    this.stepCounter = stepCounter();
 
-    this.routerCallback = this.routerCallback.bind(this);
     this.setZoom = this.setZoom.bind(this);
-    this.transitionDirection = this.transitionDirection.bind(this);
-    this.getTransitionKeys = this.getTransitionKeys.bind(this);
-    this.getTransitionStyles = this.getTransitionStyles.bind(this);
-    this.getRouteSlideIndex = this.getRouteSlideIndex.bind(this);
-
-    this.stepCounter = stepCounter();
   }
 
   state = {
@@ -90,6 +82,11 @@ class Slide extends React.PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('load', this.setZoom);
+    window.removeEventListener('resize', this.setZoom);
+  }
+
   componentDidUpdate() {
     const { steps, slideIndex } = this.stepCounter.getSteps();
     const stepFunc = this.props.getAnimStep || this.props.getAppearStep;
@@ -100,35 +97,6 @@ class Slide extends React.PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('load', this.setZoom);
-    window.removeEventListener('resize', this.setZoom);
-  }
-
-  componentWillEnter(callback) {
-    this.setState({ transitioning: false, reverse: false, z: 1 });
-    this.routerCallback(callback);
-  }
-
-  componentWillAppear(callback) {
-    this.setState({ transitioning: false, reverse: false, z: 1 });
-    this.routerCallback(callback);
-  }
-
-  componentWillLeave(callback) {
-    this.setState({ transitioning: true, reverse: true, z: '' });
-    this.routerCallback(callback);
-  }
-
-  routerCallback(callback) {
-    const { transition, transitionDuration } = this.props;
-    if (transition.length > 0) {
-      setTimeout(() => callback(), transitionDuration);
-    } else {
-      callback();
-    }
-  }
-
   setZoom() {
     const mobile = window.matchMedia('(max-width: 628px)').matches;
     const content = this.contentRef;
@@ -155,132 +123,49 @@ class Slide extends React.PureComponent {
     }
   }
 
-  transitionDirection() {
-    const { slideIndex, lastSlideIndex } = this.props;
-    const routeSlideIndex = this.getRouteSlideIndex();
-    return this.state.reverse
-      ? slideIndex > routeSlideIndex
-      : slideIndex > lastSlideIndex;
-  }
-
-  getTransitionKeys() {
-    const {
-      props: { transition = [], transitionIn = [], transitionOut = [] },
-      state: { reverse }
-    } = this;
-    if (reverse && transitionOut.length > 0) {
-      return transitionOut;
-    } else if (transitionIn.length > 0) {
-      return transitionIn;
-    }
-    return transition;
-  }
-
-  // eslint-disable-next-line
-  getTransitionStyles() {
-    const { transitioning, z } = this.state;
-    const transition = this.getTransitionKeys();
-    let styles = { zIndex: z };
-    let transformValue = '';
-
-    if (transition.indexOf('fade') !== -1) {
-      styles = { ...styles, opacity: transitioning ? 0 : 1 };
-    }
-
-    if (transition.indexOf('zoom') !== -1) {
-      transformValue += ` scale(${transitioning ? 0.1 : 1.0})`;
-    }
-
-    if (transition.indexOf('slide') !== -1) {
-      const offset = this.transitionDirection() ? 100 : -100;
-      transformValue += ` translate3d(${transitioning ? offset : 0}%, 0, 0)`;
-    } else {
-      transformValue += ' translate3d(0px, 0px, 0px)';
-    }
-
-    if (transition.indexOf('spin') !== -1) {
-      const angle = this.transitionDirection() ? 90 : -90;
-      transformValue += ` rotateY(${transitioning ? angle : 0}deg)`;
-    }
-
-    const functionStyles = transition.reduce((memo, current) => {
-      if (isFunction(current)) {
-        return {
-          ...memo,
-          ...current(transitioning, this.transitionDirection())
-        };
-      }
-      return memo;
-    }, {});
-
-    return { ...styles, transform: transformValue, ...functionStyles };
-  }
-
-  getRouteSlideIndex() {
-    const { slideReference } = this.props;
-    const { route } = this.context.store.getState();
-    const { slide } = route;
-    const slideIndex = findIndex(slideReference, reference => {
-      return slide === String(reference.id);
-    });
-    return Math.max(0, slideIndex);
-  }
-
   render() {
-    const { presenterStyle, children, transitionDuration } = this.props;
-
-    if (!this.props.viewerScaleMode) {
-      document.documentElement.style.fontSize = `${16 * this.state.zoom}px`;
-    }
+    const { presenterStyle, children } = this.props;
 
     const contentClass = isUndefined(this.props.className)
       ? ''
       : this.props.className;
 
     return (
-      <VictoryAnimation
-        data={this.getTransitionStyles()}
-        duration={transitionDuration}
-        easing="quadInOut"
+      <SlideContainer
+        className="spectacle-slide"
+        innerRef={s => {
+          this.slideRef = s;
+        }}
+        exportMode={this.props.export}
+        printMode={this.props.print}
+        background={this.context.styles.global.body.background}
+        styles={{
+          base: getStyles.call(this),
+          presenter: presenterStyle
+        }}
       >
-        {animatedStyles => (
-          <SlideContainer
-            className="spectacle-slide"
-            innerRef={s => {
-              this.slideRef = s;
-            }}
-            exportMode={this.props.export}
-            printMode={this.props.print}
-            background={this.context.styles.global.body.background}
-            styles={{
-              base: getStyles.call(this),
-              presenter: presenterStyle
+        <SlideContentWrapper
+          align={this.props.align}
+          overviewMode={this.context.overview}
+        >
+          <SlideContent
+            innerRef={c => {
+              this.contentRef = c;
             }}
-            style={{ ...animatedStyles }}
+            className={`${contentClass} spectacle-content`}
+            overviewMode={this.context.overview}
+            width={this.context.contentWidth}
+            height={this.context.contentHeight}
+            scale={this.state.contentScale}
+            zoom={this.state.zoom}
+            margin={this.props.margin}
+            style={{ ...(this.props.contentStyles || {}) }}
+            styles={{ context: this.context.styles.components.content }}
           >
-            <SlideContentWrapper
-              align={this.props.align}
-              overviewMode={this.context.overview}
-            >
-              <SlideContent
-                innerRef={c => {
-                  this.contentRef = c;
-                }}
-                className={`${contentClass} spectacle-content`}
-                overviewMode={this.context.overview}
-                width={this.context.contentWidth}
-                height={this.context.contentHeight}
-                scale={this.state.contentScale}
-                zoom={this.state.zoom}
-                margin={this.props.margin}
-                styles={{ context: this.context.styles.components.content }}
-              >
-                {children}
-              </SlideContent>
-            </SlideContentWrapper>
-          </SlideContainer>
-        )}
-      </VictoryAnimation>
+            {children}
+          </SlideContent>
+        </SlideContentWrapper>
+      </SlideContainer>
     );
   }
 }


Test patch:
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
index 7948753..de7bfac 100644
--- a/src/components/__snapshots__/manager.test.js.snap
+++ b/src/components/__snapshots__/manager.test.js.snap
@@ -107,7 +107,8 @@ exports[`<Manager /> should render correctly. 1`] = `
             <div
               className="css-r8ywg3 eaa55an1"
             >
-              <MockSlide
+              <SlideWrapper
+                align="center center"
                 dispatch={[Function]}
                 export={false}
                 fragments={
@@ -116,8 +117,9 @@ exports[`<Manager /> should render correctly. 1`] = `
                   }
                 }
                 hash={0}
-                key=".$.0"
+                key=".$0"
                 lastSlideIndex={0}
+                presenterStyle={Object {}}
                 print={false}
                 slideIndex={0}
                 slideReference={
@@ -132,6 +134,7 @@ exports[`<Manager /> should render correctly. 1`] = `
                     },
                   ]
                 }
+                style={Object {}}
                 transition={
                   Array [
                     "zoom",
@@ -139,11 +142,76 @@ exports[`<Manager /> should render correctly. 1`] = `
                   ]
                 }
                 transitionDuration={500}
+                viewerScaleMode={false}
               >
-                <div>
-                  Slide Content
-                </div>
-              </MockSlide>
+                <VictoryAnimation
+                  data={
+                    Object {
+                      "transform": " scale(1) translate3d(0%, 0, 0)",
+                      "zIndex": 1,
+                    }
+                  }
+                  delay={0}
+                  duration={500}
+                  easing="quadInOut"
+                >
+                  <div
+                    style={
+                      Object {
+                        "backgroundColor": "",
+                        "display": "flex",
+                        "height": "100%",
+                        "left": 0,
+                        "overflow": "hidden",
+                        "position": "absolute",
+                        "top": 0,
+                        "transform": " scale(0.1) translate3d(-100%, 0, 0)",
+                        "transformOrigin": "center center",
+                        "width": "100%",
+                        "zIndex": 1,
+                      }
+                    }
+                  >
+                    <MockSlide
+                      dispatch={[Function]}
+                      export={false}
+                      fragments={
+                        Object {
+                          "fragments": Array [],
+                        }
+                      }
+                      hash={0}
+                      key=".0"
+                      lastSlideIndex={0}
+                      print={false}
+                      slideIndex={0}
+                      slideReference={
+                        Array [
+                          Object {
+                            "id": 0,
+                            "rootIndex": 0,
+                          },
+                          Object {
+                            "id": 1,
+                            "rootIndex": 1,
+                          },
+                        ]
+                      }
+                      transition={
+                        Array [
+                          "zoom",
+                          "slide",
+                        ]
+                      }
+                      transitionDuration={500}
+                    >
+                      <div>
+                        Slide Content
+                      </div>
+                    </MockSlide>
+                  </div>
+                </VictoryAnimation>
+              </SlideWrapper>
             </div>
           </TransitionGroup>
         </Styled(TransitionGroup)>
@@ -766,7 +834,8 @@ exports[`<Manager /> should render with slideset slides 1`] = `
             <div
               className="css-r8ywg3 eaa55an1"
             >
-              <MockSlide
+              <SlideWrapper
+                align="center center"
                 dispatch={[Function]}
                 export={false}
                 fragments={
@@ -775,8 +844,9 @@ exports[`<Manager /> should render with slideset slides 1`] = `
                   }
                 }
                 hash={1}
-                key=".$.0"
+                key=".$1"
                 lastSlideIndex={1}
+                presenterStyle={Object {}}
                 print={false}
                 slideIndex={1}
                 slideReference={
@@ -797,13 +867,80 @@ exports[`<Manager /> should render with slideset slides 1`] = `
                     },
                   ]
                 }
+                style={Object {}}
                 transition={Array []}
                 transitionDuration={500}
+                viewerScaleMode={false}
               >
-                <div>
-                  Slide Content
-                </div>
-              </MockSlide>
+                <VictoryAnimation
+                  data={
+                    Object {
+                      "transform": " translate3d(0px, 0px, 0px)",
+                      "zIndex": 1,
+                    }
+                  }
+                  delay={0}
+                  duration={500}
+                  easing="quadInOut"
+                >
+                  <div
+                    style={
+                      Object {
+                        "backgroundColor": "",
+                        "display": "flex",
+                        "height": "100%",
+                        "left": 0,
+                        "overflow": "hidden",
+                        "position": "absolute",
+                        "top": 0,
+                        "transform": " translate3d(0px, 0px, 0px)",
+                        "transformOrigin": "center center",
+                        "width": "100%",
+                        "zIndex": 1,
+                      }
+                    }
+                  >
+                    <MockSlide
+                      dispatch={[Function]}
+                      export={false}
+                      fragments={
+                        Object {
+                          "fragments": Array [],
+                        }
+                      }
+                      hash={1}
+                      key=".0"
+                      lastSlideIndex={1}
+                      print={false}
+                      slideIndex={1}
+                      slideReference={
+                        Array [
+                          Object {
+                            "id": 0,
+                            "rootIndex": 0,
+                          },
+                          Object {
+                            "id": 1,
+                            "rootIndex": 1,
+                            "setIndex": 0,
+                          },
+                          Object {
+                            "id": 2,
+                            "rootIndex": 1,
+                            "setIndex": 1,
+                          },
+                        ]
+                      }
+                      transition={Array []}
+                      transitionDuration={500}
+                    >
+                      <div>
+                        Slide Content
+                      </div>
+                    </MockSlide>
+                  </div>
+                </VictoryAnimation>
+              </SlideWrapper>
             </div>
           </TransitionGroup>
         </Styled(TransitionGroup)>
diff --git a/src/components/__snapshots__/slide.test.js.snap b/src/components/__snapshots__/slide.test.js.snap
index ddb420f..d58c764 100644
--- a/src/components/__snapshots__/slide.test.js.snap
+++ b/src/components/__snapshots__/slide.test.js.snap
@@ -13,83 +13,61 @@ exports[`<Slide /> should render correctly with transitions. 1`] = `
   }
   viewerScaleMode={false}
 >
-  <VictoryAnimation
-    data={
+  <Styled(div)
+    background="#eee"
+    className="spectacle-slide"
+    exportMode={undefined}
+    innerRef={[Function]}
+    printMode={undefined}
+    styles={
       Object {
-        "transform": " translate3d(-100%, 0, 0) rotateY(-90deg)",
-        "zIndex": 1,
+        "base": Object {},
+        "presenter": Object {},
       }
     }
-    delay={0}
-    duration={1000}
-    easing="quadInOut"
   >
-    <Styled(div)
-      background="#eee"
-      className="spectacle-slide"
-      exportMode={undefined}
-      innerRef={[Function]}
-      printMode={undefined}
-      style={
-        Object {
-          "transform": " translate3d(-100%, 0, 0) rotateY(-90deg)",
-          "zIndex": 1,
-        }
-      }
-      styles={
-        Object {
-          "base": Object {},
-          "presenter": Object {},
-        }
-      }
+    <div
+      className="spectacle-slide css-1w0uyvd e1s7evq10"
     >
-      <div
-        className="spectacle-slide css-1w0uyvd e1s7evq10"
-        style={
-          Object {
-            "transform": " translate3d(-100%, 0, 0) rotateY(-90deg)",
-            "zIndex": 1,
-          }
-        }
+      <Styled(div)
+        align="center center"
+        overviewMode={undefined}
       >
-        <Styled(div)
-          align="center center"
-          overviewMode={undefined}
+        <div
+          className="css-13fut6c e1s7evq11"
         >
-          <div
-            className="css-13fut6c e1s7evq11"
+          <Styled(div)
+            className=" spectacle-content"
+            height={undefined}
+            innerRef={[Function]}
+            margin={undefined}
+            overviewMode={undefined}
+            scale={1}
+            style={Object {}}
+            styles={
+              Object {
+                "context": Object {},
+              }
+            }
+            width={undefined}
+            zoom={0.6}
           >
-            <Styled(div)
-              className=" spectacle-content"
+            <div
+              className=" spectacle-content css-1wqnfch e1s7evq12"
               height={undefined}
-              innerRef={[Function]}
-              margin={undefined}
-              overviewMode={undefined}
               scale={1}
-              styles={
-                Object {
-                  "context": Object {},
-                }
-              }
+              style={Object {}}
               width={undefined}
-              zoom={0.6}
             >
-              <div
-                className=" spectacle-content css-1wqnfch e1s7evq12"
-                height={undefined}
-                scale={1}
-                width={undefined}
-              >
-                <div>
-                  Slide Content
-                </div>
+              <div>
+                Slide Content
               </div>
-            </Styled(div)>
-          </div>
-        </Styled(div)>
-      </div>
-    </Styled(div)>
-  </VictoryAnimation>
+            </div>
+          </Styled(div)>
+        </div>
+      </Styled(div)>
+    </div>
+  </Styled(div)>
 </Slide>
 `;
 
@@ -100,82 +78,60 @@ exports[`<Slide /> should render correctly without transitions. 1`] = `
   style={Object {}}
   viewerScaleMode={false}
 >
-  <VictoryAnimation
-    data={
+  <Styled(div)
+    background="#eee"
+    className="spectacle-slide"
+    exportMode={undefined}
+    innerRef={[Function]}
+    printMode={undefined}
+    styles={
       Object {
-        "transform": " translate3d(0px, 0px, 0px)",
-        "zIndex": 1,
+        "base": Object {},
+        "presenter": Object {},
       }
     }
-    delay={0}
-    duration={1000}
-    easing="quadInOut"
   >
-    <Styled(div)
-      background="#eee"
-      className="spectacle-slide"
-      exportMode={undefined}
-      innerRef={[Function]}
-      printMode={undefined}
-      style={
-        Object {
-          "transform": " translate3d(0px, 0px, 0px)",
-          "zIndex": 1,
-        }
-      }
-      styles={
-        Object {
-          "base": Object {},
-          "presenter": Object {},
-        }
-      }
+    <div
+      className="spectacle-slide css-1w0uyvd e1s7evq10"
     >
-      <div
-        className="spectacle-slide css-1w0uyvd e1s7evq10"
-        style={
-          Object {
-            "transform": " translate3d(0px, 0px, 0px)",
-            "zIndex": 1,
-          }
-        }
+      <Styled(div)
+        align="center center"
+        overviewMode={undefined}
       >
-        <Styled(div)
-          align="center center"
-          overviewMode={undefined}
+        <div
+          className="css-13fut6c e1s7evq11"
         >
-          <div
-            className="css-13fut6c e1s7evq11"
+          <Styled(div)
+            className=" spectacle-content"
+            height={undefined}
+            innerRef={[Function]}
+            margin={undefined}
+            overviewMode={undefined}
+            scale={1}
+            style={Object {}}
+            styles={
+              Object {
+                "context": Object {},
+              }
+            }
+            width={undefined}
+            zoom={0.6}
           >
-            <Styled(div)
-              className=" spectacle-content"
+            <div
+              className=" spectacle-content css-1wqnfch e1s7evq12"
               height={undefined}
-              innerRef={[Function]}
-              margin={undefined}
-              overviewMode={undefined}
               scale={1}
-              styles={
-                Object {
-                  "context": Object {},
-                }
-              }
+              style={Object {}}
               width={undefined}
-              zoom={0.6}
             >
-              <div
-                className=" spectacle-content css-1wqnfch e1s7evq12"
-                height={undefined}
-                scale={1}
-                width={undefined}
-              >
-                <div>
-                  Slide Content
-                </div>
+              <div>
+                Slide Content
               </div>
-            </Styled(div)>
-          </div>
-        </Styled(div)>
-      </div>
-    </Styled(div)>
-  </VictoryAnimation>
+            </div>
+          </Styled(div)>
+        </div>
+      </Styled(div)>
+    </div>
+  </Styled(div)>
 </Slide>
 `;
diff --git a/src/components/slide.test.js b/src/components/slide.test.js
index aea66a2..236c986 100644
--- a/src/components/slide.test.js
+++ b/src/components/slide.test.js
@@ -54,19 +54,6 @@ describe('<Slide />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('should return the correct transition keys', () => {
-    const wrapper = mount(
-      <Slide transitionIn={['slide']} transitionOut={['fade']}>
-        <div>Slide Content</div>
-      </Slide>,
-      { context: _mockContext() }
-    );
-
-    expect(wrapper.instance().getTransitionKeys()).toEqual(['slide']);
-    wrapper.setState({ reverse: true });
-    expect(wrapper.instance().getTransitionKeys()).toEqual(['fade']);
-  });
-
   test('should call optional callback when slide becomes active', () => {
     const spy = jest.fn();
     mount(