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

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.

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

结论 (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上进行查看 。

Enjoy!

请享用！

翻译自: https://www.digitalocean.com/community/tutorials/react-react-morph

react前端ui的使用