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

View File

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

View File

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