reactjs - 如何触发 React TransitionGroup 和 Transition 以动画 onLoad

Question

给定下面使用 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>
    );
  }
};

Answer 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>
);

Answer 2

对于那些还在想...

您需要将出现属性添加到 Transition/CSSTransition 标签。参考文档链接：

http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear。

您还可以在相同的标签上使用key属性并在组件挂载时更新它。这将获得相同的结果，但控制比仅仅安装更多。