爱他们或恨他们，现代网页设计中的动画可能会继续存在。与 jQuery 的辉煌时代不同，React 开箱即用并没有提供任何机制来执行此类动画。当然你可以做一点 CSS 魔法来为元素设置动画，但是如果想要将一组元素变形为另一组元素怎么办？什么是react-morph发挥作用。

react-morph是一个小型 JavaScript 库，它提供了一个<ReactMorph>组件，该组件利用渲染道具在您的 React 应用程序中轻松创建变形效果。

入门

在我们开始之前，我们需要react-morph使用npm或添加到我们的项目中yarn：

# via npm
$ npm install --save react-morph

# via yarn
$ yarn add react-morph

请务必react-morph在您的项目中包含您想要使用它的任何地方：

import ReactMorph from "react-morph";

陷阱

在我们深入研究 之前react-morph，我想谈谈这个库的注意事项或“陷阱”。

首先，像大多数开源产品一样，它是一项正在进行的工作。不过，很多事情都在进行中。哎呀，即使是 React 也是 😉

Next,react-morph对空白非常敏感，因为它可以为元素引入额外的间距并摆脱变形动画。您可能需要将元素设置为display: inline-block或将所有内容包装在另一个元素中。

如前所述，额外的间距可能会导致问题，因此诸如边距之类的东西也会让您感到悲伤。确保在过渡中匹配两个元素的边距，或者简单地用另一个元素包裹起来。

列表项引入了类似的问题，应用list-style: none应该会有所帮助。

如果事情仍然表现得很奇怪，您可能需要添加一些占位符元素以避免额外的失真。

一般来说，动画很难做到恰到好处，所以我认为这些小怪癖中的任何一个都不应该让你离开这个库。

用法

的使用react-morph非常简单。

Using<ReactMorph>公开了一系列属性，我们可以使用这些属性来标记不同的过渡状态 ( fromand to)、动画补间 ( fadeInand fadeOut) 以及可以触发以启动过渡 ( go)的函数。

在from和to性质有一个字符串属性，将作为关键国过渡联系在一起。

基本变形

我能想到的最基本的例子是取一些文本并将其变形为其他文本。

<ReactMorph>
  {({ from, to, fadeIn, fadeOut, go }) => (
    <div>
      <a onClick={() => go(1)}>
        <h3 {...from("text")} style={{ display: "inline-block" }}>
          See ya later, alligator...
        </h3>
        <p {...fadeOut()}>Click the text above ;)</p>
      </a>
      <div>
        <h3 {...to("text")} style={{ display: "inline-block" }}>
          After awhile, crocodile!
        </h3>
        <div>
          <a onClick={() => go(0)} {...fadeIn()}>
            Would you like to redo?
          </a>
        </div>
      </div>
    </div>
  )}
</ReactMorph>

这里没什么太疯狂的。我们只需将我们的两个状态都包装在 中<ReactMorph>，设置我们的点击事件以用于go()在状态之间to(key)切换并识别状态的各个部分。

如您所见，某些元素的样式已设置为显示inline-block. 这消除了一些奇怪的怪癖，元素在页面上有点弹出。

还值得注意的是，它react-morph似乎只处理两种状态。由于go()接受一个整数，我想我会尝试用第三种状态来设置，好吧，没有骰子。

更复杂的用法

变形文本非常适合展示react-morph可以做什么，但这可能不是您在应用程序中使用这个库的方式。

更真实的例子是采用用户单击的按钮以显示菜单并将所述按钮变形为菜单：

<ReactMorph>
  {({ from, to, go }) => (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        position: "relative",
      }}
    >
      <button
        onClick={() => go(1)}
        {...from("menu")}
        style={{ position: "absolute" }}
      >
        Click to Open
      </button>
      <div
        style={{
          backgroundColor: "#6DB65B",
          border: "2px solid #008f68",
          padding: 10,
          position: "absolute",
        }}
        {...to("menu")}
      >
        <div
          style={{
            alignItems: "center",
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          <strong>Menu</strong>
          <button onClick={() => go(0)}>X</button>
        </div>
        <hr />
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
        <div>Menu Item 3</div>
      </div>
    </div>
  )}
</ReactMorph>

与以前相同的概念，只是在样式上采用了一些不同的方法，以使每个状态看起来都占据相同的位置。

结论

除了注意事项之外，react-morph在 React 应用程序中的元素之间添加一些更复杂的变形动画变得非常容易。

我希望你喜欢这篇文章，如果你有兴趣看到这篇文章中的代码演示，你可以在CodeSandbox上查看。

享受！