import React from "react";
import { CSSTransition } from "react-transition-group";
import styled from "styled-components";
const duration = 300;
const ChildrenWrapper = styled.div `
  transition: all ${duration}ms ease-in-out;
  will-change: transform;
  ${p => !p.fixed
    ? `
    position: absolute;
    width: 100%;
    `
    : ""}
  height: 100%;

  &.transition-left-appear,
  &.transition-left-enter {
    transform: translateX(100%);
  }

  &.transition-left-appear-active,
  &.transition-left-enter-active {
    transform: translateX(0%);
  }

  &.transition-left-exit {
    transform: translateX(0%);
  }

  &.transition-left-exit-active {
    transform: translateX(${p => (p.reverseExit ? 100 : -100)}%);
  }

  &.transition-right-appear,
  &.transition-right-enter {
    transform: translateX(-100%);
  }

  &.transition-right-appear-active,
  &.transition-right-enter-active {
    transform: translateX(0%);
  }

  &.transition-right-exit {
    transform: translateX(0%);
  }

  &.transition-right-exit-active {
    transform: translateX(${p => (p.reverseExit ? -100 : 100)}%);
  }
`;
const TransitionSlide = ({ children, fixed, direction = "left", reverseExit, ...props }) => (React.createElement(CSSTransition, { ...props, timeout: duration, classNames: `transition-${direction}` },
    React.createElement(ChildrenWrapper, { fixed: fixed, reverseExit: reverseExit }, children)));
export default TransitionSlide;
//# sourceMappingURL=TransitionSlide.js.map