@re-flex/ui/Transitions/Slide.js

Re-Flex ui library

import React from "react";
import { CoreTransition } from "./Core";
const SlideTransitionGenerator = {
    left: {
        from: { transform: `translateX(-100%)` },
        to: { transform: `translateX(0%)` },
    },
    right: {
        from: { transform: `translateX(100%)` },
        to: { transform: `translateX(0%)` },
    },
    up: {
        from: { transform: `translateY(-100%)` },
        to: { transform: `translateY(0%)` },
    },
    bottom: {
        from: { transform: `translateY(100%)` },
        to: { transform: `translateY(0%)` },
    },
};
export const Slide = ({ direction = "up", ...props }) => {
    const { from, to } = SlideTransitionGenerator[direction];
    return React.createElement(CoreTransition, { ...props, inStyle: to, outStyle: from });
};