Question

嗨，我正在尝试使用React的CSSTransitionGroup来顺利淡入   单击按钮后，在异步调用期间加载的微调器，   但即使我根据文件（https://github.com/reactjs/react-transition-group/tree/v1-stable）做了所有事情，也就是说   过渡并不顺利。

描述实际情况   单击按钮时更清晰地发生：
按下＆＃34;按下＆＃34;按页面上微调器的长度。

此时，html是一个div，包含微调器（带有输入属性）和下面的按钮（带有leave属性）

按钮在看似半秒的时间内淡出。一旦淡出，锭床就会消失。

几秒钟后，整个过渡似乎已经完成，只有按钮存在（间距正确）。

代码
 // App.js
 import { CSSTransitionGroup } from 'react-transition-group';

 export default class App extends Component {
     constructor(props) {
          super(props);
          this.renderButton = this.renderButton.bind(this);
     }

     renderButton(handleClick, fetching, fetched) {
          if (!fetching && !fetched) {
              return(<button className="async-btn" key="async-btn" type="button" onClick={handleClick}>Start Async</button>);
          }
          else {
               return(<Spinner key="spinner" />);
          }
      }

      render() {
      const { fetched, fetching, handleClick } = this.props;
          return (
              <CSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
                  {this.renderButton(handleClick, fetching, fetched)}
              </CSSTransitionGroup>
          )
      }
}

// index.css
.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
问题

1）我不能像我一样触发成功的过渡   在按钮和组件之间切换（这只是一个div   内有img）？或者它必须是ul或数组渲染吗？

2）还有什么我不遵循的   文档？

谢谢。

Answer 1

无缝地淡入/淡出两个不同元素之间的解决方案需要容器位置：相对，容器中的元素具有位置：绝对。

感谢Melounek在上述评论中提出的有益思想。

此stackoverflow帖子非常全面，并且很好地列出了解决方案：React animate transition between components

React CSSTransitionGroup没有顺利过渡

代码

问题

1 个答案: