home: better animation with bouncing and translateY

This commit is contained in:
Peter Cai 2020-02-19 19:45:26 +08:00
parent 2b42e19ecb
commit bcbe96c249
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
1 changed files with 13 additions and 4 deletions

View File

@ -1,11 +1,16 @@
import React from "react"
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
import { AnimatedSwitch } from 'react-router-transition'
import { AnimatedSwitch, spring } from 'react-router-transition'
import ReactModal from "react-modal"
import Pastebin from "./pastebin"
import BinaryUpload from "./binaryUpload"
import FileViewerDispatcher from "./fileViewerDispatcher"
bounce = (val) ->
spring val,
stiffness: 330
damping: 22
class Home extends React.Component
constructor: (props) ->
super props
@ -23,9 +28,13 @@ class Home extends React.Component
<div className="content">
<Router>
<AnimatedSwitch
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
atEnter={{ opacity: 0, translateY: -5 }}
atLeave={{ opacity: 0, translateY: bounce -5 }}
atActive={{ opacity: 1, translateY: bounce 0 }}
mapStyles={(styles) ->
opacity: styles.opacity
transform: "translateY(#{styles.translateY}%)"
}
className="switch-wrapper"
>
<Redirect exact from="/" to="/paste/text" />