Animate page transition
I am trying to animate route changes with Motion One. However, I seem to not get the overall logic of Solid Router since no route is shown at all in my MWE:
Any help would be a appreciated.
import {render} from 'solid-js/web';
import {A, Route, Router} from '@solidjs/router';
import {Motion} from 'solid-motionone';
const Home = () => {
return (
<>
<p>Home</p>
<A href="/about">About</A>
</>
)
}
const About = () => {
return (
<>
<p>About</p>
<A href="/">Home</A>
</>
)
}
const RouteAnimation = (props: any) => (
<Motion
animate={{opacity: 0.75, transition: {duration: 1}}}
exit={{opacity: 0.25, transition: {duration: 1}}}
>
<Route path={props.path} component={props.component}/>
</Motion>
);
const App = () => {
return (
<>
<Router>
<RouteAnimation path="/" component={Home}/>
<RouteAnimation path="/about" component={About}/>
</Router>
</>
)
}
render(() => <App/>, document.getElementById('root')!);import {render} from 'solid-js/web';
import {A, Route, Router} from '@solidjs/router';
import {Motion} from 'solid-motionone';
const Home = () => {
return (
<>
<p>Home</p>
<A href="/about">About</A>
</>
)
}
const About = () => {
return (
<>
<p>About</p>
<A href="/">Home</A>
</>
)
}
const RouteAnimation = (props: any) => (
<Motion
animate={{opacity: 0.75, transition: {duration: 1}}}
exit={{opacity: 0.25, transition: {duration: 1}}}
>
<Route path={props.path} component={props.component}/>
</Motion>
);
const App = () => {
return (
<>
<Router>
<RouteAnimation path="/" component={Home}/>
<RouteAnimation path="/about" component={About}/>
</Router>
</>
)
}
render(() => <App/>, document.getElementById('root')!);Any help would be a appreciated.
