Lee Lee - 2 months ago 68
React JSX Question

React Animations - Slide between components

I've got a new ReactJS app. I'm trying to animate between views using ReactCSSTransitionGroup plugin, but the animation classes aren't being applied as expected. No animations seem to take place. Am i missing something?

React Animation Docs

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { connect } from 'react-redux';

import { FORM_PAGE, QUOTE_PAGE } from '../Config/Pages'
import Form from './Form';
import Quote from './Quote';

class App extends Component {
render() {
return (
<ReactCSSTransitionGroup
transitionName="page"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{this.renderPage()}
</ReactCSSTransitionGroup>
)
}

renderPage() {
switch (this.props.currentPage) {
case QUOTE_PAGE:
return (<Quote />);
case FORM_PAGE:
return (<Form />);
default:
return (<Quote />)
}
}
}

function mapStateToProps(state) {
return {
currentPage: state.app.currentPage
};
}

export default connect(mapStateToProps)(App);


CSS

<style>
.page-enter {
transform: translate(100%);
}
.page-enter.page-enter-active {
transform: translate(0%);
transition: transform 1000ms ease-in-out;
}
.page-leave {
transform: translate(0%);
}
.page-leave.page-leave-active {
transform: translate(-100%);
transition: transform 1000ms ease-in-out;
}
</style>

Answer

The problem is you're not setting keys on the returned components. E.g.

 renderPage() {
    switch (this.props.currentPage) {
      case QUOTE_PAGE:
        return (<Quote key={'quote'} />);
      case FORM_PAGE:
        return (<Form key={'form'} />);
      default:
        return (<Quote key={'quote'} />)
    }
  }

Here's a fiddle showing a simplified version of your code. Click the button to see the animation. Remove the key from Page1 and Page2 to break it.

http://jsbin.com/xoviholumi

Comments