%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[177],{2711:function(e,t,n){"use strict";n.r(t);var a=n(0),c=n(1426),s=(n(1434),n(1));const i=Object(a.forwardRef)(((e,t)=>{const n=Object(a.cloneElement)(e.children,{style:{...e.children.style,visibility:"hidden"}});return Object(s.jsx)(c.VelocityComponent,{ref:t,...e,children:n})}));i.defaultProps={animation:"transition.fadeIn",runOnMount:!0,targetQuerySelector:null,interruptBehavior:"stop",visibility:"visible",duration:300,delay:50,easing:[.4,0,.2,1],display:null,setRef:void 0};var l=Object(a.memo)(i),r=n(118),o=n(1109),d=n(1035),j=n(548),p=n(1038),m=n(1092),f=n(1044),b=n(1072),u=n(194);const h=["fade","flipX","flipY","flipBounceX","flipBounceY","swoop","whirl","shrink","expand","bounce","bounceUp","bounceDown","bounceLeft","bounceRight","slideUp","slideDown","slideLeft","slideRight","slideUpBig","slideDownBig","slideLeftBig","slideRightBig","perspectiveUp","perspectiveDown","perspectiveLeft","perspectiveRight"],x={translateX:[0,"100%"],opacity:[1,0]},O=Object(b.a)({layoutRoot:{},box:{width:128,height:128,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",padding:16}});t.default=function(){const e=O(),[t,n]=Object(a.useState)("fade"),[c,i]=Object(a.useState)(x),b=Object(a.useRef)();return Object(a.useEffect)((()=>(b.current=setInterval((()=>{i(c?null:x)}),1e3),()=>{clearInterval(b.current)}))),Object(s.jsxs)(s.Fragment,{children:[Object(s.jsx)(u.a,{variant:"h4",className:"mb-24",children:"Fuse Animate"}),Object(s.jsxs)(u.a,{className:"mb-16",component:"p",children:[Object(s.jsx)("code",{children:"FuseAnimate"})," is a container component that uses ",Object(s.jsx)("code",{children:"VelocityComponent"})," ","of ",Object(s.jsx)("code",{children:"velocity-react"})," library."]}),Object(s.jsx)(u.a,{className:"mt-32 mb-8",variant:"h5",children:"Predefined Effects Usage"}),Object(s.jsx)(u.a,{className:"mb-16",component:"p",children:"You can use predefined animation effects."}),Object(s.jsx)(r.a,{component:"pre",className:"language-jsx",children:'\n <FuseAnimate\n animation="transition.'.concat(t,'In"\n duration={400}\n delay={400}\n >\n <Card className={classes.box}>\n <Typography>\n {selectedEffect}\n </Typography>\n </Card>\n </FuseAnimate>\n ')}),Object(s.jsxs)("div",{className:"flex flex-wrap p-48",children:[Object(s.jsx)("div",{className:"flex w-full sm:w-1/2 p-24 justify-center",children:Object(s.jsxs)(d.a,{className:"w-256",children:[Object(s.jsx)(p.a,{htmlFor:"effect-helper",children:"Select Effect"}),Object(s.jsx)(f.a,{value:t,onChange:function(e){n(e.target.value)},input:Object(s.jsx)(j.a,{name:"effect",id:"effect-helper"}),children:h.map((e=>Object(s.jsxs)(m.a,{value:e,children:["transition.",e,"In"]},e)))})]})}),Object(s.jsx)("div",{className:"flex w-full sm:w-1/2 items-center justify-center",children:Object(s.jsx)(l,{animation:t&&"transition.".concat(t,"In"),duration:400,delay:400,children:Object(s.jsx)(o.a,{className:e.box,children:Object(s.jsx)(u.a,{children:t})})})})]}),Object(s.jsx)(u.a,{className:"mt-32 mb-8",variant:"h5",children:"Custom Effects Usage"}),Object(s.jsx)(u.a,{className:"mb-16",component:"p",children:"You can create custom effects."}),Object(s.jsx)(r.a,{component:"pre",className:"language-jsx",children:"\n <FuseAnimate\n animation={{\n translateX: [0, '100%'],\n opacity : [1, 0]\n }}\n duration={400}\n delay={400}\n >\n <Card className={classes.box}>\n <Typography>\n Slide left and fade in\n </Typography>\n </Card>\n </FuseAnimate>\n "}),Object(s.jsx)("div",{className:"p-24 flex items-center justify-center",children:Object(s.jsx)(l,{animation:c,duration:400,delay:400,children:Object(s.jsx)(o.a,{className:e.box,children:Object(s.jsx)(u.a,{children:"Slide left and fade in"})})})}),Object(s.jsxs)(u.a,{className:"mb-16",component:"p",children:["For more information checkout the",Object(s.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