CSS3过渡不适用于我的Meteor / React / Bootstrap项目

Question

我不知道为什么它不起作用。我正在尝试在我的主页上使用CSS3过渡，并且显示的内容有延迟，除了没有过渡...它只是在我指定过渡的600ms之后弹出。

这是我的代码：

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

let question;

export class HomeSubmission extends React.Component {


    constructor() {
        super();

        this.state = {
            question: ''
        };
    }

    redirectToSubmission(event) {

        event.preventDefault();
        question = this.state.question;
        if (question === ''){
            //test();
           // alert('Please enter a question.');
           // return;
        }
        FlowRouter.go('/submit?question=' + question);
    }



    render() {
        return (
            <div className="jumbotron other-color">
                <ReactCSSTransitionGroup
                    component="div"
                    className="container text-center"
                    transitionName="route"
                    transitionEnterTimeout={600}
                    transitionAppearTimeout={600}
                    transitionLeaveTimeout={400}
                    transitionAppear={true}>
                    <img src="" className="img-responsive text-center" className="logo" />
                    <p className="text-center">Ask a question, get an answer.</p>

                <form onSubmit={this.redirectToSubmission.bind(this)} class="form-inline" role="form">
                            <input type="text" class="form-control" defaultValue={this.state.question} size="100" onChange={(evt) => this.setState({question: evt.target.value.trim()})}
                                   placeholder="Ask your question..."></input>&nbsp;&nbsp;
                            <button type="submit" className="btn btn-info">Ask</button>
                </form>
                </ReactCSSTransitionGroup>
            </div>


        )
    }
}

我的main.scss

@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

img.logo {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin: 0 auto;
  clear: right;
}

.navbar {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  height: 0px;
}

.navbar-btn {
  padding-top: 14px;
  padding-bottom: 0px;
  height: 0px;
}

.navbar-default {min-height: 32px;}

.form-group {
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-default {min-height: 64px;}

.navbar-nav li a {
  line-height: 60px;
}

.navbar-brand {
  padding-top: 5px;
  padding-bottom: 0px;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centerfy img{
  margin: 0 auto;
}
.centerfy{
  text-align: center;
}

.other-color {
  background: white;
}

.route-enter, .route-appear{
  opacity: 0;
  animation: slideIn .6s cubic-bezier(.165, .84, .44, 1)
}

.route-enter.route-enter-active{
  opacity: 1;
  animation: opacity 500ms ease-in;
}

.route-leave{
  opacity: 1;
  animation: slideOut .4s cubic-bezier(.165, .84, .44, 1)
}

.route-appear{
  opacity: 0;
  animation: slideUp .6s cubic-bezier(.165, .84, .44, 1)
}

.example-enter {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  position: absolute;
}

.example-leave.example-leave-active {
  opacity: 0;
}

如果您需要更多代码，请告诉我您需要的内容。