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

编程问答 2022-05-27

问题描述

我似乎对 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}
        >
...

解决方法

据我所知，React Transition Groups 只在过渡阶段有效，所以在 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} 并在 css 文件中提供 enter-* 类而无需退出-*

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

javascriptreact-transition-groupreactjsreactjsreactjsreactjs