Reactjs 和 2 元素动画一次

Question

我正在尝试用 Reactjs 来实现这个效果。下面的 youtube 视频是我正在尝试实现的动画：

https://www.youtube.com/watch?v=WVBAMiu1NPE&feature=youtu.be

现在我需要将它们变成一个 Reactjs 组件，我正在使用 react-addons-css-transition-group。我的代码应该做的是每次按下按钮时，都会在 tabContent 数组中呈现一个 div 段落，然后应该由 ReactCSSTransitionGroup 对其进行动画处理。这是我的代码

constructor(props) {
    super(props);
    this.state = {
      activeTab: 0
    };

    this.active = {
      color: '#4286f4',
      outline: 'none'
    };
    this.inactive = {};
  }


  customChange(tabNum) {
    this.setState({
      activeTab: tabNum
    });
  };

render() {
        var tabContent = [<div>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>,
                          <div>
                          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                          eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                          </div>,
                          <div>
                          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                          doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                          veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                          </div>,
                          <div>
                          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                          sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                          </div>
                        ]
        return (
            <div className='container-fluid mainDiv'>
                <div id='TabsNav'>
                    <button style={this.state.activeTab === 0 ? this.active : this.inactive} onClick={() => {this.customChange(0)}} className='roundBorderLeft InfoButton'> <br/> btn1 </button>
                    <button style={this.state.activeTab === 1 ? this.active : this.inactive} onClick={() => {this.customChange(1)}} className='adjustLeft InfoButton'> <br/> btn2</button>
                    <button style={this.state.activeTab === 2 ? this.active : this.inactive} onClick={() => {this.customChange(2)}} className='adjustLeft InfoButton'> <br/> btn3</button>
                    <button style={this.state.activeTab === 3 ? this.active : this.inactive} onClick={() => {this.customChange(3)}} className='adjustLeft roundBorderRight InfoButton'>  <br/> btn4</button>
                </div>
                <div id='TabContents'>
                  <ReactCSSTransitionGroup transitionName='tab' transitionEnterTimeout={2000} transitionLeaveTimeout={2000}>
                      {tabContent[this.state.activeTab]}
                  </ReactCSSTransitionGroup>
                </div>
            </div>
        );
      }

这是我用于过渡的 CSS 的一部分：

.tab-enter {
  opacity: 0;
  padding-left: 0;
  -webkit-transition: opacity 2s, padding-left 2s;
}

.tab-enter.tab-enter-active {
  opacity: 1;
  padding-left: 100px;
}

.tab-leave {
  opacity: 1;
  padding-left: 100px;
  -webkit-transition: opacity 2s, padding-left 2s;
}

.tab-leave.tab-leave-active {
  opacity: 0;
  padding-left: 200px;
}


.mainDiv {
  padding-top: 100px;
  padding-bottom: 100px;
  color: grey;
  background-color: #fafafa;
  border-bottom: 1px solid #ebebeb;

}

我的代码没有显示动画，标签的内容立即出现，没有任何动画。我做错了什么？

Answer 1

这是实现您想要的方法：

JS

var Hello = React.createClass({
    getInitialState: function() {
        return {
            activeTab: 0,
            previousTab: -1
        };
    },
    customChange: function (tabNum) {
        this.setState({
            activeTab: tabNum,
            previousTab: this.state.activeTab
        });
    },

    buildButton: function (content, index) {
        return (
            <button 
                key={index}
                className={"button" + (index === this.state.activeTab ? " active" : "")} 
                onClick={() => {this.customChange(index)}}>
                btn{index + 1}
            </button>
        )
    },

    buildContent: function (content, index) {
        let clazz = "item"
        clazz += (index === this.state.activeTab ? " active" : "")
        clazz += (index === this.state.previousTab ? " inactive" : "")
        return (
            <div
                key={index}
                className={clazz}>
                {content}
            </div>
        )
    },

    render: function() {
        var tabContent = [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident",
            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
            "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
        ]
        return (
            <div className='container-fluid mainDiv'>
                <div className="buttons">
                    {tabContent.map(this.buildButton)}
                </div>
                <div className='content'>
                    {tabContent.map(this.buildContent)}
                </div>
            </div>
        );
      }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

CSS

.buttons {
  text-align: center;
}

.buttons .button {
  outline: none;
  color: grey;
  margin: 5px;
  border: 0;
  background: 0;
}

.buttons .button.active {
  color: black;
}

.content {
  text-align: center;
  margin-top: 10px;
  position: relative;
}

.item {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.item.active {
  animation-name: fade-in;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}
.item.inactive {
  animation-name: fade-out;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateX(-15px);
    }
    30% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    30% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {        
        transform: translateX(15px);
    }
}

Answer 2

我在本地查了一下，你只漏掉了一件事。如果您将“键”分配给您的 tabcontent div 元素，您的代码将起作用。您必须为 ReactCSSTransitionGroup 的所有子项提供 key 属性，即使仅呈现单个项目也是如此。这就是 React 将如何确定哪些孩子已经进入、离开或留下。检查documentation。

var tabContent = [<div key="0">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>,
                          <div key="1">
                          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                          eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                          </div>,
                          <div key="2">
                          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                          doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                          veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                          </div>,
                          <div key="3">
                          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                          sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                          </div>
                        ]

您提供的 css 需要根据您想要的结果进行修改。除此之外，这个“钥匙”可以解决问题。