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

Question

鉴于下面使用 React Transition Group 的 React 组件，我怎样才能让 Transition 动画在组件加载时呈现？

从 '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

By default the Transition component does not alter the behavior of the component it renders, it only tracks "enter" and "exit" states for the components. It's up to you to give meaning and effect to those states.

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

对于那些仍然想知道的人......

您需要将 appear 属性添加到 Transition/CSSTransition 标签。请参阅文档 link:

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

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

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

How to trigger React TransitionGroup and Transition to animate onLoad

reactjs

react-transition-group