react前端ui的使用_使用React Morph变形UI过渡-CSDN博客

react前端ui的使用

Love them or hate them, animations in modern web design are probably here to stay. Unlike the glory days of jQuery, React out of the box does not provide any mechanism to perform such animations. Sure you could do a small bit of CSS wizardry to animate elements, but what if want to morph one set of elements into another? What’s were react-morph comes into play.

爱他们或恨他们，现代网页设计中的动画可能会保留下来。与jQuery辉煌的时代不同，React开箱即用不提供任何执行此类动画的机制。当然，您可以做一点CSS向导来制作元素动画，但是如果要将一组元素变形为另一组元素该怎么办？什么是react-morph发挥作用。

react-morph is a small JavaScript library that provides a <ReactMorph> component that leverages render props to easily create morphing effects in your React app.

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

入门 (Getting Started)

Before we can get started, we need to add react-morph to our project with either npm or yarn:

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

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

# via yarn
$ yarn add react-morph

Be sure to include react-morph in your project wherever you’d like to use it:

无论您想在哪里使用，请确保在项目中包括react-morph ：

import ReactMorph from "react-morph";

陷阱 (Gotchas)

Before we dive deeper into react-morph, I want to talk a bit about the caveats or “gotchas” with this library.

在更深入地讨论react-morph ，我想先谈谈关于此库的警告或“陷阱”。

First, like most open source offerings, it is a work in progress. A lot of things are works in progress though. Heck, even React is ;)

首先，像大多数开源产品一样，它仍在进行中。尽管很多事情仍在进行中。哎呀，甚至React都是;)

Next, react-morph is quite sensitive to whitespace as it can introduce additional spacing to an element and throw off the morphing animation. You may need to set your element to display: inline-block or wrap all of the content in another element.

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

As mentioned, additional spacing can cause problems so things like margins can also give you grief. Be sure to match the margins on both elements in your transition or simply wrap things up with another element.

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

List items introduce similar issues and applying list-style: none should help things along.

列表项引入了类似的问题，并采用了list-style: none可以帮助事情。

If things are still acting weird, you may need to add in some placeholder elements to avoid additional distortion.

如果情况仍然很怪异，则可能需要添加一些占位符元素，以避免其他失真。

Animations in general can be tricky to get just right so I don’t think any of these little quirks should sway you from this library.

总体而言，动画制作起来可能会很困难，因此我认为这些小怪癖都不会让您从该库中脱身。

用法 (Usage)

The usage of react-morph is pretty simple.

react-morph的用法非常简单。

Using <ReactMorph> exposes a series of properties that we can use to flag our different transition states (from and to), animation tweens (fadeIn and fadeOut) and a function that you can fire to start the transition (go).

使用<ReactMorph>可以显示一系列属性，我们可以使用这些属性来标记不同的过渡状态( from和to )，动画补间( fadeIn和fadeOut )以及可以触发以开始过渡的函数( go )。

The from and to properties take a string property that will serve as the key to link the states together for transitioning.

from和to属性采用字符串属性，该属性将用作将状态链接在一起以进行过渡的键。

基本变形 (Basic Morphing)

The most basic example I could think of is taking some text and morphing it into some other text.

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

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

Nothing too crazy here. We simply wrap both of our states in <ReactMorph>, setup our click events to use go() to go between states and to(key) to identify the parts of the state.

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

As you can see, some of the elements have been styled to display inline-block. This removed some weird quirks with the elements popping around on the page a bit.

如您所见，某些元素已设置样式以显示inline-block 。这消除了一些奇怪的怪癖，其中的元素在页面上突然弹出。

It’s also worth noting that react-morph appears to only handle two states. Since go() accepts an integer, I thought I’d try to set things up with a third state and well, no dice.

还值得注意的是， react-morph似乎只能处理两种状态。由于go()接受一个整数，所以我认为我会尝试使用第三个状态来设置事物，而且没有骰子。

更复杂的用法 (More Complex Usage)

Morphing text is great to showcase what react-morph can do, but it’s probably not how you’d use this library in your app.

变形文本很好地展示了react-morph可以做什么，但可能不是您在应用程序中使用此库的方式。

A bit more of a real world example would taking a button that a user clicks on to reveal a menu and morphing said button into a menu:

现实世界中的示例将带有一个用户单击的按钮以显示菜单，然后将所述按钮变形为菜单：

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

Same concepts as before, just a bit of a different approach to the styling to get each state to seemingly occupy the same position.

与以前相同的概念，只是样式有所不同，使每个状态看起来都占据相同的位置。