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

我在本地查过了，你只漏了一件事。如果您将 'key' 分配给您的 tabcontent div 元素，您的代码将起作用。您必须为 ReactCSSTransitionGroup 的所有 children 提供 key 属性，即使只渲染单个项目也是如此。这就是 React 确定哪些 children 已经进入、离开或停留的方式。检查 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您需要修改它以获得您想要的结果。除此之外，这个 'key' 可以解决问题。

Reactjs 和 2 个元素动画一次

Reactjs and 2 elements animations at once

javascript

reactjs

reactcsstransitiongroup