inula-transitions
v0.0.5
Published
Openinula transition component.
Downloads
17
Readme
inula-transitions
Openinula transition component.
过渡效果组件
部分功能移植于 react-transition-group
Installation
npm
npm i inula-transitions
yarn
yarn add inula-transitions
Usage
AnimateTransition
package.json
{
"dependencies": {
+ "animate.css": "^4.1.1",
}
}
import { useRef } from "openinula";
import { AnimateTransition } from "inula-transitions";
function App() {
const nodeRef = useRef(null);
return (
<AnimateTransition nodeRef={nodeRef} appear={true} in={true} timeout={1000} classNames="animate__fadeInLeft">
<div ref={nodeRef} style="width:100px;height:100px;background:blue;">
BLUE
</div>
</AnimateTransition>
);
}
CSSTransition
import { useRef, useState } from "openinula";
import { CSSTransition } from "inula-transitions";
// 属性接口参照react-transition-group.CSSTransition
function App() {
const [inProp, setInProp] = useState(false);
const nodeRef = useRef(null);
return (
<div>
<CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
<div ref={nodeRef}>{"I'll receive my-node- classes"}</div>
</CSSTransition>
<button type="button" onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
);
}
Transition
import { useState, useRef } from 'openinula';
import { Transition } from 'inula-transitions';
// 属性接口参照react-transition-group.Transition
function App() {
const [inProp, setInProp] = useState(false);
const nodeRef = useRef(null);
return (
<div>
<Transition nodeRef={nodeRef} in={inProp} timeout={500}>
{state => (
// ...
)}
</Transition>
<button onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
);
}