JSFiddle - React, Tailwind, and code Playground

by igalst

JavaScript

const Page  = ({  }) => {
	const router = useRouter();
	const [isEnabled, setEnabled] = useBackTransiton();
  
  const onBack = e => {
	  e.preventDefault();
	  setEnabled(true);
    router.back();
    // maybe:     setTimetout(router.back, 50);
  }

	return <div>
	  	<utton onclick={onBack}/>Back</button>
      <h1>My Title</h1>
  </div>


//////////////////////////

const App = () => {
	return <>
	  <Animations>{(item) =>
          <Switch location={item}>
            <Route path="/" component={Home} exact />
            <Route path="/about" component={About} />
          </Switch>
		}</Aniamtions>

}


//////////////////////////

const Animations = ({children}) => {
	const { location } = useRouter();
  const [isEnabled, setIsEnabled] = useBackTransiton(); 
	const transitions = useTransition(location, (location) => location.pathname, isEnabled ? 
  {
    from: { opacity: 0, transform: 'translate3d(100vw, 0, 0)' },
    enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
    leave: { opacity: 0, transform: 'translate3d(-20vw, 0, 0)' },
  } : {});
  
	const onTransionEnd = () => setIsEnabeld(false);	// to do: trigger when transiton fisnisehed

	return transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          {children(item)}
        </animated.div>
      ))}


}