CODEWITHSUNDEEP
reactjsreact-routerreactcsstransitiongroup
unkind
unkind

Reputation: 27

React Router v4: Animated transition jumps down

I try to setup fade-in fade-out transition between routed components using RR4 and ReactCSSTransitionGroup based on example from https://reacttraining.com/react-router/web/example/animated-transitions

Animations work, however previous component jumps down before next one is rendered.

What am I doing wrong and is there an easier way to transition between multiple components (without using parametrized paths, using react-motion instead of CSSTransitionGroup)?

screencast:

https://media.giphy.com/media/l4FGnVfAgiX4Hzns4/giphy.gif

code:

AnimatedTrans.js

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import {MemoryRouter as Router, Redirect, Route, Link} from 'react-router-dom'

import s from './AnimatedTrans.css';

const DisplayParam = ({match: {params}}) => (
    <div>param is: {params.pname} count is {params.count}</div>
);


const AnimatedTrans = () => (
    <Router>
        <Route render={({location}) => (
            <div>
                <Route exact path="/"
                       render={() => (<Redirect to='/home/0' />)} />
                <ul>
                    <li><Link to="/home/1">Home</Link></li>
                    <li><Link to="/about/2">About</Link></li>
                    <li><Link to="/contact/3">Contact</Link></li>
                </ul>
                <div className={s.el}>
                    <ReactCSSTransitionGroup
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={200}
                        transitionName={{
                            enter: s.enter,
                            enterActive: s.eactive,
                            leave: s.leave,
                            leaveActive: s.lactive,
                        }}>
                        <Route location={location}
                               key={location.key}
                               path="/:pname/:count"
                               component={DisplayParam}
                        />
                    </ReactCSSTransitionGroup>
                </div>
            </div>
        )} />
    </Router>
);

export default AnimatedTrans;

AnimatedTrans.css.

.el {
    position: absolute;
}

.enter {
    opacity: 0.01;
    transition: opacity 0.3s ease-in 0.2s;
}
.eactive {
    opacity: 1;
}

.leave {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.lactive {
    opacity: 0.01;
}

Upvotes: 0

Views: 2131

Answers (1)

Made in Moon
Made in Moon

Reputation: 2464

I have the feeling that you gave the absolute css property to the wrong div. Instead of giving it to the <ReactCSSTransitionGroup/> parent div, try to give it to the children (and put the parent position as relative).

Upvotes: 3

Related Questions