爱他们或讨厌他们,现代Web设计中的动画很可能在这里留下来。与jQuery的光荣时代不同,React out of the box不提供执行此类动画的任何机制。
react-morph是一个小型的JavaScript库,提供一个<ReactMorph>组件,可利用 render props在您的React应用程序中轻松创建变形效果。
开始的
在我们开始之前,我们需要添加反应形态到我们的项目中,使用npm或yarn:
1# via npm
2$ npm install --save react-morph
3
4# via yarn
5$ yarn add react-morph
请确保在您想要使用的任何地方,将反应形态纳入您的项目:
1import ReactMorph from "react-morph";
哥特
在我们深入反应morph之前,我想谈谈这个图书馆的警告或gotchas。
首先,就像大多数开源产品一样,这是一个正在进行的工作. 虽然很多事情正在进行中。
接下来,react-morph是非常敏感的白色空间,因为它可以引入额外的间隔到一个元素和扔掉的形态动画。
正如上面提到的,额外的间隔可能会导致问题,所以像边缘一样的东西也会让你感到难过. 请确保在过渡中匹配两个元素的边缘,或者简单地将事物包裹到另一个元素上。
列表项目引入类似的问题,并应用列表风格:没有应该帮助事情。
如果事情仍然表现得很奇怪,您可能需要添加一些保留点元素以避免进一步的扭曲。
总的来说,动画可以很困难,所以我认为这些小奇怪的东西都不应该让你离开这个图书馆。
使用
使用反应morph是相当简单的。
使用ReactMorph揭示了一系列的属性,我们可以用来标志我们的不同的过渡状态(从和到),动画调整(fadeIn和fadeOut)和一个功能,你可以开启开始过渡(走。
从和到属性具有一个字符串属性,它将作为将状态连接到一起进行过渡的密钥。
基本 Morphing
我能想到的最基本的例子是拿一些文本并将其变成其他文本。
1<ReactMorph>
2 {({ from, to, fadeIn, fadeOut, go }) => (
3 <div>
4 <a onClick={() => go(1)}>
5 <h3 {...from("text")} style={{ display: "inline-block" }}>
6 See ya later, alligator...
7 </h3>
8 <p {...fadeOut()}>Click the text above ;)</p>
9 </a>
10 <div>
11 <h3 {...to("text")} style={{ display: "inline-block" }}>
12 After awhile, crocodile!
13 </h3>
14 <div>
15 <a onClick={() => go(0)} {...fadeIn()}>
16 Would you like to redo?
17 </a>
18 </div>
19 </div>
20 </div>
21 )}
22</ReactMorph>
我们简单地将我们的两个状态包装在<ReactMorph>,设置我们的点击事件以使用go()在状态之间移动,并(钥匙)来识别状态的部分。
正如你所看到的,一些元素已经被设计成显示线性块,这消除了一些奇怪的奇怪,元素在页面上出现了一点。
值得注意的是,反应形态似乎只处理两种状态,因为go()接受整数,所以我认为我会试图用第三种状态来设置事物,好吧,没有数字。
更复杂的使用
形态文本是很好的展示反应形态可以做什么,但这可能不是你如何在你的应用程序中使用这个库。
更多真实世界的例子会采取一个用户点击的按钮来揭示菜单,并将该按钮转化为菜单:
1<ReactMorph>
2 {({ from, to, go }) => (
3 <div
4 style={{
5 display: "flex",
6 justifyContent: "center",
7 position: "relative",
8 }}
9 >
10 <button
11 onClick={() => go(1)}
12 {...from("menu")}
13 style={{ position: "absolute" }}
14 >
15 Click to Open
16 </button>
17 <div
18 style={{
19 backgroundColor: "#6DB65B",
20 border: "2px solid #008f68",
21 padding: 10,
22 position: "absolute",
23 }}
24 {...to("menu")}
25 >
26 <div
27 style={{
28 alignItems: "center",
29 display: "flex",
30 justifyContent: "space-between",
31 width: "100%",
32 }}
33 >
34 <strong>Menu</strong>
35 <button onClick={() => go(0)}>X</button>
36 </div>
37 <hr />
38 <div>Menu Item 1</div>
39 <div>Menu Item 2</div>
40 <div>Menu Item 3</div>
41 </div>
42 </div>
43 )}
44</ReactMorph>
与以前相同的概念,只是对风格的稍微不同的方法,让每个州似乎占据相同的位置。
结论
除了警告之外,反应morph使您在React应用程序中的元素之间放下一些更复杂的形态动画非常容易。
我希望你喜欢这个帖子,如果你有兴趣看到这个帖子的代码演示,你可以检查它在CodeSandbox(https://codesandbox.io/s/jvk9kljxpw)。
享受吧!