use native animations (fixes #2)

This commit is contained in:
2019-02-11 13:58:05 +03:00
parent d5253ba0a5
commit 37824ad373
3 changed files with 9 additions and 6 deletions

View File

@@ -7,7 +7,7 @@ import {
Switch, Switch,
withRouter, withRouter,
} from "react-router"; } from "react-router";
import { Transition } from "react-spring/renderprops"; import { animated, Transition } from "react-spring/renderprops";
import { IAppState } from "~redux/reducers"; import { IAppState } from "~redux/reducers";
import { Login } from "./Login"; import { Login } from "./Login";
@@ -30,6 +30,7 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
) : ( ) : (
<div className="animationWrapper"> <div className="animationWrapper">
<Transition <Transition
native={true}
items={location} items={location}
keys={location.pathname} keys={location.pathname}
from={{ from={{
@@ -46,12 +47,12 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
}} }}
> >
{(_location: any) => (style: any) => ( {(_location: any) => (style: any) => (
<div style={style}> <animated.div style={style}>
<Switch location={_location}> <Switch location={_location}>
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
</Switch> </Switch>
</div> </animated.div>
)} )}
</Transition> </Transition>
</div> </div>

View File

@@ -107,6 +107,7 @@ export class DocumentEditComponent extends React.PureComponent<
</div> </div>
); );
} else { } else {
this.tryLoad();
return this.props.spinner && <LoadingStub />; return this.props.spinner && <LoadingStub />;
} }
} }

View File

@@ -13,7 +13,7 @@ import {
import * as React from "react"; import * as React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Route, RouteComponentProps, Switch, withRouter } from "react-router"; import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
import { config, Transition } from "react-spring/renderprops"; import { animated, config, Transition } from "react-spring/renderprops";
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import { IDocumentJSON } from "~../../src/entity/Document"; import { IDocumentJSON } from "~../../src/entity/Document";
import { IUserJSON } from "~../../src/entity/User"; import { IUserJSON } from "~../../src/entity/User";
@@ -111,6 +111,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
</Navbar> </Navbar>
<div id="MainScreen" className="animationWrapper"> <div id="MainScreen" className="animationWrapper">
<Transition <Transition
native={true}
config={{ config={{
...config.default, ...config.default,
clamp: true, clamp: true,
@@ -132,7 +133,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
}} }}
> >
{(_location: any) => (style: any) => ( {(_location: any) => (style: any) => (
<div style={style} className="viewComponent"> <animated.div style={style} className="viewComponent">
<Switch location={_location}> <Switch location={_location}>
<Route <Route
path="/docs/:id/edit" path="/docs/:id/edit"
@@ -144,7 +145,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
/> />
<Route path="/" component={Overview} /> <Route path="/" component={Overview} />
</Switch> </Switch>
</div> </animated.div>
)} )}
</Transition> </Transition>
</div> </div>