小编jrS*_*zci的帖子

我目前正在研究React中的通知组件.它正在工作,除了过渡..不知何故它甚至没有添加类.我查了一些React动画示例,我做了一些研究,但我找不到任何有用的东西.特别是React15的文章.我不明白,这应该是完美的,但它只是显示和隐藏文本没有任何过渡.

import React, { Component } from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import '../stylesheets/notification.less';

export default class Notifications extends Component {
    render() {
        return (
           <CSSTransitionGroup transitionName="notifications" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
                    <div className={this.props.type === 'error' ? 'notification-inner warning' : 'notification-inner success'}>
                      {this.props.type} {this.props.message}
                    </div>
            </CSSTransitionGroup>
        );
    }
}

和CSS文件......

.notifications {
    background:#000;
}
.notifications-enter {
    opacity: 0;
    transform:   translate(-250px,0);
    transform: translate3d(-250px,0,0);
}
.notifications-enter.notifications-enter-active {
    opacity: 1;
    transition: opacity 1s ease;
    transform:   translate(0,0);
    transform: translate3d(0,0,0);
    transition-property: transform, opacity;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.175, 0.665, …

这些是我在 Router.js 中的主要路由

const Routes = () => {
    return ( 
        <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    );
}

这些是我在主页下的嵌套路由。现在仪表板和主页正在运行，但忘记密码和注册不起作用。我只能看到没有错误的空白页。

render() {
     const {match} = this.props;
    return (
        <div className="container home-grid">
            <div className="featured">
                <Featured />
            </div>
            <div className="home-forms">
                <div className="logo">
                    <Logo />
                </div>
                <TransitionGroup className="route-page">
                    <CSSTransition
                        key={location.pathname}
                        timeout={{ enter: 800, exit: 800 }}
                        classNames="page"
                    >
                        <section className="route-section">
                            <Switch>
                                <Route exact path={match.path} component={SignIn}/>
                                <Route path={`${match.path}forgot-password`} component={ForgotPassword} />


                            </Switch>
                        </section>
                    </CSSTransition>
                </TransitionGroup>
                <div className="footer-text">
                    <Text specialClass="footer"></Text>
                </div> …