1
我有一個新的ReactJS應用程序。我正在嘗試使用ReactCSSTransitionGroup插件在視圖之間進行動畫製作,但動畫類未按預期應用。似乎沒有動畫。我錯過了什麼嗎?React動畫 - 組件間滑動
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>
好和簡單,謝謝你的 – Lee