React的动画

Question

我必须创建一些复杂的动画。使用jQuery或VanillaJS开发它们很酷，但我想我应该选择React的另一种方式。谷歌给了我ReactCSSTransitionGroup，但它似乎被打破并且没有维护（根据这条消息：）。例如。在开始制作动画之前我无法延迟。

我还找到了一个名为React-motion的库，但我不确定它是否真的是我需要的工具。所以我想问你是否可以推荐一些关于它的东西。可能我应该使用VanillaJS（使用refs和其他ReactDOM函数）？或者还有另一种方法吗？提前致谢。

Answer 1

在React或实际上在网络上的任何地方制作动画的最简单方法是使用 CSS Transitions 。

CSS Transitions实际上与React无关。引用MDN，

  

CSS Transitions 是CSS模块，可让您创建   特定CSS属性值之间的逐渐过渡。的   这些过渡的行为可以通过指定其行为来控制   计时功能，持续时间和其他属性。

由于CSS过渡是纯CSS，因此它们可用于React应用程序，Angular，纯Java甚至是完全没有Javascript的老式服务器渲染页面中。

这不是最通用或最强大的技术。但是，由于在大多数情况下，我们想要的动画非常简单，为什么当简单的东西可以完成工作时为什么要寻找更复杂的东西呢？

CSS Transitions也是well-supported by all major browsers，但版本10以下的Opera Mini和IE明显例外。

CSS转换使我们能够在两个CSS状态之间进行动画。假设您要对抽屉的打开和关闭进行动画处理（通过单击按钮触发）。假设抽屉周围有一个flex容器。打开抽屉时，我们希望它占据容器宽度的100％，因此其max-width应该是100％。当它关闭时，其宽度应为0。我们可以创建两种CSS样式：

/* This CSS style is applied when the drawer is opened */
const openedStyle = {
  maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
};

/* This CSS style is applied when the drawer is closed */
const closedStyle = {
  maxWidth: 0 /* max-width is 0 in the closed drawer */,
};

然后我们处理打开/关闭事件，在打开/关闭时将这些类之一应用于抽屉对象：

class Drawer extends React.Component {
  state = {
    opened: false // Initially search form is Closed
  };

  toggleOpened = () =>
    // Toggle opened / closed state.
    // Because we rely on the previous state, we need to use
    // a functional setState form
    // https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
    this.setState(state => ({ ...state, opened: !state.opened }));

  render() {
    const { opened } = this.state;
    return (
      <div className="drawer-container col-12 col-md-4">
        <input
          type="text"
          className="drawer"
          // Apply 'openedStyle' CSS class if the drawer is opened,
          // and 'closedStyle' if the drawer is closed.
          style={opened ? openedStyle : closedStyle}
        />
        <button
          type="button"
          className="open-close-button btn btn-primary"
          onClick={this.toggleOpened}
        >
          {opened ? 'Close' : 'Open'}
        </button>
      </div>
    );
  }
}

export default Drawer;

当我们按下“打开/关闭”按钮时，抽屉将在0到100％的宽度之间翻转，从而有效地打开和关闭。

我们现在所需的只是对其进行动画处理。

为此，我们需要一个秘密要素-CSS transition属性。我们要做的就是在抽屉中添加以下样式：

/* This CSS style is applied when the drawer is opened */
const openedStyle = {
  maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
  /* Upon transitioning to Open,
     animate `max-width' for 0.5s*/
  transition: 'max-width 0.5s'
};

/* This CSS style is applied when the drawer is closed */
const closedStyle = {
  maxWidth: 0 /* max-width is 0 in the closed drawer */,
  /* Upon transitioning to Closed,
     animate `max-width' for 0.5s */
  transition: 'max-width 0.5s'
};

Voilà！我们已经获得了动画-单击按钮后，抽屉现在可以在半秒内展开和折叠！

简而言之，就是它了，但还有更多内容：

• 您可以通过CSS过渡为多个CSS属性设置动画。
• 您可以将延迟应用于可过渡属性，即先为不透明度设置动画，然后在延迟0.5秒后为同一元素的宽度设置动画。
• 您可以将各种timing functions应用于过渡。

我写了一个扩展的博客，解释了以上所有内容：Painless React Animations via CSS Transitions。

Answer 2

也许react-magic可以帮到你。

Answer 3

查看这个易于使用和流行的软件包：

https://www.npmjs.com/package/react-transition-group

安装：

npm install react-transition-group

用法：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

注意：确保使用CSS中的class属性应用以下样式：

.my-element-enter {
  opacity: 0;
  transform: scale(0.9);
}
.my-element-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
  opacity: 1;
}
.my-element-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}