如何触发 React TransitionGroup 和 Transition 以动画 onLoad答案

【问题标题】：How to trigger React TransitionGroup and Transition to animate onLoad如何触发 React TransitionGroup 和 Transition 以动画 onLoad
【发布时间】：2019-01-27 02:48:47
【问题描述】：

鉴于下面的 React 组件使用了 React 过渡组，我如何才能让过渡动画在组件加载时呈现？

从“反应”导入反应；从 'react-transition-group' 导入 { TransitionGroup, Transition };

const FeatureItem3 = class extends React.Component {
  constructor() {
    super();
    this.state = {
      animate: true,
    };
  }
  render() {
    return (           
        <TransitionGroup>
          <Transition
            in={this.state.animate}
            timeout={0}
          >
            <div>xxx</div>
          </Transition>
          <Transition
            in={this.state.animate}
            timeout={1000}
          >
            <div>yyyy</div>
          </Transition>
          <Transition
            in={this.state.animate}
            timeout={2200}
          >
            <div>zzzz</div>
          </Transition>
        </TransitionGroup>
    );
  }
};

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

默认情况下，Transition 组件不会改变它渲染的组件的行为，它只会跟踪组件的“进入”和“退出”状态。赋予这些状态以意义和效果取决于您。

https://reactcommunity.org/react-transition-group/transition

他们的文档中的示例：

import Transition from 'react-transition-group/Transition';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered:  { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

【讨论】：