React-addons-css-transition-group样式

Question

我正在尝试在React JS中创建标签，我想使用React-addons-css-transition-group为它添加一些动画。

我的代码如下：

render() {

    let view = this.state.tiresView ? this.renderTiresView() : this.renderOptionsView();

    return (
        <div >
            <div className="tiresFeaturesTitle">
                <Link to="" onClick={this.changeView.bind(this, "options")} >Options</Link>
                <Link to="" onClick={this.changeView.bind(this, "tires")} >Tires</Link>
            </div>
            <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500} transitionAppear={true} transitionAppearTimeout={500}>
                <div key={this.state.tiresView}>
                    {view}
                </div>
            </ReactCSSTransitionGroup>
        </div>
    );
}

example的样式是：

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

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

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

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

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

它工作正常，但是当我更换标签时，我也会看到旧标签大约半秒钟。我不要那个。

我希望当我点击更改标签时，旧标签会立即消失。

你可以在照片上看到我的意思。我点击将标签视图更改为轮胎，但是有一秒钟我看到下面的旧标签内容this is options view。我想避免这种情况。

Answer 1

尝试将position: absolute添加到.example-leave？可能无法解决问题，但我认为正在发生的是你需要修改这个类的风格。

Answer 2

通过将display:none添加到.example-leave课程来解决问题。

工作css如下：

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

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

.example-leave {
  display: none;
  opacity: 1;
  transition: opacity .5s ease-in;
}

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

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}