React Steersman Transition
Tiny react transition library
Usage
Browser example
JSS example
;;; const styles = 'animation': transition: 'opacity 1s ease' 'fade-enter-start': opacity: 0 'fade-enter-active': opacity: 1 'fade-enter-done': opacity: 1 ; { return className: } @ { const classes = thisprops; return <Transition timeout=1000 mapProps=mapProps children= <div className=className>transition</div> startOnMount /> }
Style object example
; const styles = 'animation': transition: 'all 1s ease' 'fade-enter-start': opacity: 0 'fade-enter-active': opacity: 1 'fade-enter-done': opacity: 1 ; { return style: ...stylesanimation ...styles`fade--` ;} { return <Transition timeout=1000 mapProps=mapProps children= <div style=style>transition</div> startOnMount /> }
React Native example
;; const styles = StyleSheet; static timeout = 375; value = 0; { if thisanimation thisanimation; const display = direction === 'enter'; thisvalue; thisanimation = Animatedstart; }; { return <Transition timeout=Apptimeout children= <AnimatedText style=stylestext opacity: thisvalue >transition</AnimatedText> onEnter=thisanimate startOnMount /> }
License
License The MIT License Copyright (c) 2017-2018 Ivan Zakharchanka