React Transition Group - 如何在组件更新时触发动画？答案

【问题标题】：React Transition Group - How to trigger animation for a component when it updates?React Transition Group - 如何在组件更新时触发动画？
【发布时间】：2021-05-06 03:30:08
【问题描述】：

我似乎对 React Transition Group 的工作原理缺乏基本的了解。在这个简单的示例中，我希望组件在每次更新时都会淡入。它不是。为什么会这样？如果我将 in 属性切换为，那么它确实有效。

import React from 'react';
import ReactDOM from 'react-dom';
import { Container, Button, Alert } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';

import './styles.css';
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rerender: false,
    };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState((state) => ({
      rerender: !state.rerender,
    }));
  }
  componentDidMount() {
    console.log('Mounted');
  }
  componentDidUpdate() {
    console.log('Updated');
  }
  render() {
    return (
      <div>
        <Button onClick={this.toggle}>Click</Button>
         <CSSTransition
          classNames="fade"
          in = {true}
          timeout={1000}
        >
           {this.state.rerender ?  <p> Render On </p> : <p>Render Off</p>}
        </CSSTransition>
      </div>
    );
  }
}
ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

这里是 CSS

.fade-enter {
  opacity: 1;
}
.fade-enter-active {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1000ms;
}
.fade-enter-done {
  opacity: 0;
}

根据我阅读的路线，我认为将“in”属性保留为始终正确，将始终在每个组件更新上应用 enter-* CSS 类。正如您所看到的，当我按下按钮时，会更新组件。没有动画发生： https://codesandbox.io/s/beautiful-brahmagupta-6nmze?file=/index.js 另一方面，如果我用 true 和 false 切换 in 道具，那么将应用进入的类。在代码沙箱中尝试一下，自己看看。

...
<CSSTransition
          classNames="fade"
          in = {this.state.rerender}
          timeout={1000}
        >
...

【问题讨论】：

标签： javascript css reactjs react-transition-group

【解决方案1】：

据我所知，React 过渡组仅在过渡阶段有效，因此在 prop 中应该是

false 到 true
true 到 false

在源码中可以看得很清楚

_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
  var nextStatus = null;

  if (prevProps !== this.props) {
    var status = this.state.status;

    if (this.props.in) {
      if (status !== ENTERING && status !== ENTERED) {
        nextStatus = ENTERING;
      }
    } else {
      if (status === ENTERING || status === ENTERED) {
        nextStatus = EXITING;
      }
    }
  }

  this.updateStatus(false, nextStatus);
};

_proto.updateStatus = function updateStatus(mounting, nextStatus) {
  if (mounting === void 0) {
    mounting = false;
  }

  if (nextStatus !== null) {
    // nextStatus will always be ENTERING or EXITING.
    this.cancelNextCallback();

    if (nextStatus === ENTERING) {
      this.performEnter(mounting);
    } else {
      this.performExit();
    }
  } else if (this.props.unmountOnExit && this.state.status === EXITED) {
    this.setState({
      status: UNMOUNTED
    });
  }
};

所以如果 props 没有改变，什么都不会发生。

在您的情况下，您仅尝试应用 enter-* 类：您可以让 in = {this.state.rerender} 并在没有 enter-* 类>退出-*

您还可以在安装时使用另一个库为组件设置动画，例如：React-animations

【讨论】：