react-flex-animations

Show/hide flexbox items with animation

Install

react-flex-animations depends on styled-components. It's best to keep the number of styled-components installations down, so I've made it a peer dependency that you will need to satisfy in the project you intend to use library with.

npm install --save react-flex-animations styled-components

Usage

importReactfrom'react'import{AnimatedFlexbox}from'react-flex-animations'importstyledfrom'styled-components';constNav=styled(AnimatedFlexbox)`height:72px;a, section:nth-child(odd) { background:#03d19a;}section:nth-child(even){ background:#bada55;}`;constTest=styled.section` display: flex; flex-direction: row; align-items: center; justify-content: space-around; overflow: hidden; margin:0; padding:0;`;constApp=()=>{const[hide,setHide]=React.useState(0);React.useEffect(()=>{constt=setTimeout(()=>setHide(hide+1),2000);return()=>{clearTimeout(t);}},[hide])return(<Navcomponent="nav"spacerComponent="div"><ahref="#!"role="button"data-hidden={hide%4===1}>Logo</a><sectionclassName="taskSwitcher"data-hidden={hide%4===2}>TaskSwitcher</section><TestclassName="rightNav"data-hidden={hide%4===0}data-ratio={1}><section><spanrole="img"aria-label="Help">❓</span></section><section><spanrole="img"aria-label="Bell">🔔</span></section><section><spanrole="img"aria-label="Settings">⚙</span></section><section><spanrole="img"aria-label="User">👤</span></section></Test></Nav>);}exportdefaultApp

License

MIT © AskAlice.me