@bhupinderanand/react-redux-saga-boilerplate/src/components/Transition/transitions.ts

Boilerplate with React and Redux with Redux Saga

import styled from 'styled-components';

import { easing } from 'modules/theme';

const Fade = styled.div`
  will-change: opacity, transform;

  &.fade-appear,
  &.fade-enter {
    opacity: 0.01;
  }

  &.fade-appear {
    &.fade-appear-active {
      opacity: 1;
      transition: 0.3s opacity;
    }
  }

  &.fade-enter {
    &.fade-enter-active {
      opacity: 1;
      transition: 0.3s opacity;
    }
  }

  &.fade-exit {
    opacity: 1;

    &.fade-exit-active {
      opacity: 0.01;
      transition: 0.3s opacity;
    }
  }
`;

const SlideDown = styled.div`
  will-change: opacity, transform;

  &.slide-down-appear,
  &.slide-down-enter {
    opacity: 0.01;
    transform: translate3d(0, -100%, 0);
  }

  &.slide-down-appear {
    &.slide-down-appear-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-down-enter {
    &.slide-down-enter-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-down-exit {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &.slide-down-exit-active {
      opacity: 0.01;
      transform: translate3d(0, -100%, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }
`;

const SlideLeft = styled.div`
  will-change: opacity, transform;

  &.slide-left-appear,
  &.slide-left-enter {
    opacity: 0.01;
    transform: translate3d(100%, 0, 0);
  }

  &.slide-left-appear {
    &.slide-left-appear-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-left-enter {
    &.slide-left-enter-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-left-exit {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &.slide-left-exit-active {
      opacity: 0.01;
      transform: translate3d(100%, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }
`;

const SlideRight = styled.div`
  will-change: opacity, transform;

  &.slide-right-appear,
  &.slide-right-enter {
    opacity: 0.01;
    transform: translate3d(-100%, 0, 0);
  }

  &.slide-right-appear {
    &.slide-right-appear-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-right-enter {
    &.slide-right-enter-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-right-exit {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &.slide-right-exit-active {
      opacity: 0.01;
      transform: translate3d(-100%, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }
`;

const SlideUp = styled.div`
  will-change: opacity, transform;

  &.slide-up-appear,
  &.slide-up-enter {
    opacity: 0.01;
    transform: translate3d(0, 100%, 0);
  }

  &.slide-up-appear {
    &.slide-up-appear-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-up-enter {
    &.slide-up-enter-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }

  &.slide-up-exit {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &.slide-up-exit-active {
      opacity: 0.01;
      transform: translate3d(0, 100%, 0);
      transition: 0.3s opacity, 0.3s transform ${easing};
    }
  }
`;

export const classNames = {
  fade: 'fade',
  slideDown: 'slide-down',
  slideLeft: 'slide-left',
  slideRight: 'slide-right',
  slideUp: 'slide-up',
};

export default {
  fade: Fade,
  slideDown: SlideDown,
  slideLeft: SlideLeft,
  slideRight: SlideRight,
  slideUp: SlideUp,
};