react前端ui的使用_使用React Morph变形UI过渡

妖狐艹你老母 2022-11-27 04:25 116阅读 0赞

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`][react-morph] comes into play.

爱他们或恨他们，现代网页设计中的动画可能会保留下来。 与jQuery辉煌的时代不同，React开箱即用不提供任何执行此类动画的机制。 当然，您可以做一点CSS向导来制作元素动画，但是如果要将一组元素变形为另一组元素该怎么办？ 什么是[`react-morph`][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>`组件，该组件利用[渲染道具][render props]轻松在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.

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

## 结论 **(**Conclusion**)** ##

Caveats aside, `react-morph` makes it very easy to drop in some more sophisticated morphing animations between elements in your React app.

除了警告之外， `react-morph`使得在React应用程序中的元素之间放一些更复杂的变形动画非常容易。

I hope you enjoyed this post and if you’re interested in seeing a demo of the code from this post, you can check it out over on [CodeSandbox][].

希望您喜欢这篇文章，如果您有兴趣查看这篇文章中的代码演示，可以在[CodeSandbox][]上进行[查看][CodeSandbox] 。

Enjoy!

请享用！

> 翻译自: [https://www.digitalocean.com/community/tutorials/react-react-morph][https_www.digitalocean.com_community_tutorials_react-react-morph]

react前端ui的使用

[react-morph]: https://github.com/brunnolou/react-morph
[render props]: https://reactjs.org/docs/render-props.html
[CodeSandbox]: https://codesandbox.io/s/jvk9kljxpw
[https_www.digitalocean.com_community_tutorials_react-react-morph]: https://www.digitalocean.com/community/tutorials/react-react-morph