Question

我有一个新的ReactJS应用程序。我正在尝试使用ReactCSSTransitionGroup插件在视图之间设置动画，但动画类未按预期应用。似乎没有动画。我错过了什么吗？

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 1

问题是您没有在返回的组件上设置键。例如。

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

这是一个显示代码简化版本的小提琴。单击按钮以查看动画。从Page1和Page2中删除密钥以打破它。

http://jsbin.com/xoviholumi

反应动画 - 在组件之间滑动

1 个答案: