%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[176],{2712:function(e,t,n){"use strict";n.r(t);var i=n(0),s=n(1426),a=(n(1434),n(1));const c={animation:"transition.fadeIn",stagger:50,duration:200,display:null,visibility:"visible",delay:0},r={stagger:50,duration:200,display:null,visibility:"visible",delay:0};function l(e){return Object(a.jsx)(s.VelocityTransitionGroup,{...e,enter:{...c,...e.enter},leave:{...r,...e.leave}})}l.defaultProps={enter:c,leave:r,easing:[.4,0,.2,1],runOnMount:!0,enterHideStyle:{opacity:1},enterShowStyle:{opacity:0}};var o=Object(i.memo)(l),m=n(118),u=n(1033),j=n(1034),p=n(194);const d=["List Item 1","List Item 2","List Item 3","List Item 4","List Item 5","List Item 6","List Item 7","List Item 8","List Item 9","List Item 10","List Item 11","List Item 12","List Item 13","List Item 14","List Item 15"];t.default=function(){const[e,t]=Object(i.useState)(d),n=Object(i.useRef)();return Object(i.useEffect)((()=>(n.current=setInterval((()=>{t(0!==e.length?[]:d)}),2e3),()=>{clearInterval(n.current)}))),Object(a.jsxs)(a.Fragment,{children:[Object(a.jsx)(p.a,{variant:"h4",className:"mb-24",children:"FuseAnimateGroup"}),Object(a.jsxs)(p.a,{className:"mb-16",component:"p",children:[Object(a.jsx)("code",{children:"FuseAnimateGroup"})," is a container component which uses",Object(a.jsx)("code",{children:"VelocityTransitionGroup"})," of ",Object(a.jsx)("code",{children:"velocity-react"}),"library. Delegates to the React TransitionGroup addon."]}),Object(a.jsx)(p.a,{className:"mt-32 mb-8",variant:"h5",children:"Sample Usage"}),Object(a.jsxs)("div",{className:"flex flex-wrap p-48 items-start",children:[Object(a.jsx)("div",{className:"flex w-full sm:w-1/2 p-24 justify-center",children:Object(a.jsx)(u.a,{children:Object(a.jsx)(o,{enter:{animation:"transition.slideUpBigIn"},leave:{animation:"transition.slideUpBigOut"},children:e.map(((e,t)=>Object(a.jsx)(j.a,{children:e},t)))})})}),Object(a.jsx)("div",{className:"flex w-full sm:w-1/2 p-24 justify-center",children:Object(a.jsx)(m.a,{component:"pre",className:"language-jsx",children:'\n <List>\n <FuseAnimateGroup\n enter={{\n animation: "transition.slideUpBigIn"\n }}\n leave={{\n animation: "transition.slideUpBigOut"\n }}\n >\n {\n list.map((item) => (\n <ListItem key={item}>\n {item}\n </ListItem>\n )\n )\n }\n </FuseAnimateGroup>\n </List>\n '})})]}),Object(a.jsxs)(p.a,{className:"mb-16",component:"p",children:["For more information checkout the",Object(a.jsx)("a",{href:"https://github.com/google-fabric/velocity-react",target:"_blank",rel:"noopener noreferrer",className:"ml-8",children:"velocity-react"}),"."]})]})}}}]);
Zerion Mini Shell 1.0