zero-distance

zero-distance

快速在react中实现两个路由中的相同组件的动画效果。

灵感

来源于Vue官方文档中的transition-group的介绍，其中原理是使用的是flip实现，因此想到如果将这个效果使用到不同路由的相同组件中应该会很有趣。

兼容性说明

由于采用react-hook进行的开发，所以需要项目中使用的react版本>16.9

安装

npm install zero-distance

使用

快速使用

// 在你的Router组件之前使用Stage包裹
// 如以下的代码

import {Stage} from 'zero-distance'
<BrowerRouter>
	<Stage>
		...你的路由组件
	</Stage>
</BrowerRouter>

// 在两个路由组件中使用Actor包裹需要使用动画的子组件
// 如以下的代码

// route1
import {Actor} from 'zero-distance'
<div>
	<Actor name="singleName">
		<span>something else...</span>
	</Actor>
</div>

// route2
import {Actor} from 'zero-distance'
<div>
	<Actor name="singleName">
		<span>something else...</span>
	</Actor>
</div>

组件props以及api

建设中...

测试

建设中...