使用React设置动画

Question

我必须创建一些复杂的动画。用jQuery或VanillaJS开发它们很酷，但我想我应该用React选择另一种方式。谷歌给了我ReactCSSTransitionGroup，但它似乎坏了，而且没有维护(根据这条消息：github.com)。在开始播放动画之前，我不能延迟。

我还找到了一个名为React-motion的库，但我不确定它是否真的是我需要的工具。所以我想问你能不能给我推荐一些相关的东西。也许我应该使用VanillaJS (使用ref和其他ReactDOM函数)？还是有另一种方法呢？提前谢谢。

Answer 1

在React中，或者实际上，在web上的任何地方制作动画的最简单的方法就是使用CSS过渡。

CSS转换实际上与React没有任何关系。引用MDN的话，

CSS Transitions是一个CSS模块，可以让您在特定CSS属性的值之间创建渐变。可以通过指定它们的计时函数、持续时间和其他属性来控制这些转换的行为。

因为CSS过渡是一种纯CSS，所以它们可以用于React应用程序、Angular、纯Javascript，甚至是没有Javascript的老式服务器渲染页面。

它不是最通用或最强大的技术。但是，既然在大多数情况下，我们想要的动画都很简单，那么当一个简单的动画就可以完成工作时，为什么还要寻找更复杂的动画呢？

CSS过渡也是well-supported by all major browsers的，一个值得注意的例外是Opera Mini和IE版本10以下。

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'
};

瞧！我们得到了我们的动画-在点击按钮后，我们的抽屉现在在半秒内展开和折叠！

​

​

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

transition.

• You可以将延迟应用于可转换的属性，即首先设置不透明度动画，然后在0.5秒延迟后设置相同元素的宽度。

• 您可以对CSS应用各种timing functions

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

Answer 2

查看这个易于使用且受欢迎的包：

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;
}

Answer 3

也许react-magic能帮到你。