1

我正在构建一个带有 React 的个人网站，并试图在加载几秒钟后让一些 h2 淡入。我在以下组件上使用 ReactCssTransitionGroup：

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

class TitleArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: ['h2-one', 'h2-two', 'h2-three'],
      h2Texts: ['Text1', 'Text2', 'Text3']
    };
  }

  render() {
    const descriptionDivs = this.state.ids.map( (id, index)=> {
      return(<h2 key={id} id={id}>
        {this.state.h2Texts[index]}
      </h2>)
    })
return (
  <div className='row odd'>
    <h1> MYNAMEHERE </h1>
    <div className='description-container'>
      <ReactCSSTransitionGroup
      transitionName="descriptions"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
        {descriptionDivs}
      </ReactCSSTransitionGroup>
    </div>
  </div>
    );
  }
}

export default TitleArea;

CSS/SASS：

.site-container {
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  h1 {
    font-size: 50px;
    font-family: 'Arvo', serif;
  h2 {
    font-size: 25px;
   }
  }
.descriptions-enter {
   opacity: 0.01;
 }
.descriptions-enter.descriptions-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
 }

理想情况下，我希望每个 h2 一个接一个地过渡，但我试图先处理 react-addons，然后再跳到交错的淡入淡出。有没有人对 React 中的 css 转换有任何经验。尝试按照文档进行操作，但有点迷失了。任何见解都非常感谢！谢谢

4

0 回答 0