反应 CSSTransitionGroup 不能顺利过渡答案

【问题标题】：React CSSTransitionGroup not transitioning smoothly反应 CSSTransitionGroup 不能顺利过渡
【发布时间】：2017-08-17 21:27:07
【问题描述】：

您好，我正在尝试使用 React 的 CSSTransitionGroup 来平滑淡入单击按钮后，用于在异步调用期间加载的微调器，但即使我按照文档 (https://github.com/reactjs/react-transition-group/tree/v1-stable) 做所有事情，过渡并不顺利。

描述实际情况单击按钮时发生的情况更清楚：

按钮按页面上微调器的长度“下推”。

此时，html 是一个 div，其中包含微调器（带有 enter 属性）及其下方的按钮（带有 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) 还有什么我没有遵循的吗文档？

谢谢。

【问题讨论】：

我没有发现任何问题...在过渡期间必须同时处理这两个元素。如果您不想触发过渡，那为什么要将其置于过渡中？
如果不清楚（我所看到的很难描述），我深表歉意。我想要一个过渡，但过渡一点也不顺利。事实上，过渡看起来与我想象的相反，它正在向下跳跃。除非，为了使用 CSSTransitionGroups 简单地淡出和淡入，我需要给出一个特定的特征吗？
也许你缺少定位？这意味着您例如将position: absolute 放入 .fade-leave 类中，这样它就会像上面的层一样淡出。

标签： reactjs animation transition reactcsstransitiongroup

【解决方案1】：

在两个不同元素之间无缝淡入/淡出的解决方案要求容器是位置：相对的，容器内的元素是位置：绝对的。

感谢 Melounek 对上述 cmets 的有益思想。

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

【讨论】：