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;
}