1.0.1 • Published 7 years ago
mcfinley-simple-react-transition v1.0.1
React transition
Installation
npm i --save mcfinley-simple-react-transition
Usage
import Transition from 'mcfinley-simple-react-transition';
/* */
const isVisible = /* The main thing: is this component visible or not */;
return (
<Transition visible={isVisible} cssName="test-animation" afterEnter={200}>
/* Your stuff */
</Transition>
);
.test-animation {
&-after-enter {
& { opacity: 0.0 }
&-active { opacity: 1.0; transition: opacity 200ms ease; }
}
}
Transitions
You can use after-enter
and before-enter
transitions like:
<Transition afterEnter={200} beforeEnter={200}>...</Transition>
It will make a 200ms
pause before mounting component and 200ms
pause after (means nothing).
You can add css transitions to this pauses using cssName
property.
<Transition cssName="test" afterEnter={200} beforeEnter={200}>...</Transition>
It will apply .test-before-enter
and .test-before-enter-active
classes in beforeEnter
pause,
and .test-after-enter
and .test-after-enter-active
classes in afterEnter
.
Css animations wont work in beforeEnter
and afterLeave
pauses.
Notes
Transition
inserts a warp node for the content
<Transition>
Test
</Transition>
<!-- Got transformed to -->
<div>
Test
</div>
You can replace the div
tag and the className
with component
and className
props.
<Transition component="span" className="my-class">Test</Transition>
<!-- -> -->
<span class="my-class">Test</span>