React spring transition setting 'none' to transform in enter

Question

Does anyone have idea about how to set react spring transition css transform value to "none" in enter prop. What I m trying to do here is I need to change transform value into "none" based on my layout.

<Route 
        render={({ location, ...rest }) => (

            <Transition
                native
                items={location}
                keys= {location.pathname.split('/')[1]}
                // from= {{ opacity: 0 }}
                // enter={{ opacity: 1 }}
                // leave={{ opacity: 0, position: 'absolute', top: 0, left: 0, width: "100%" }}
                from={{ opacity: 0, transform: 'translate3d(100%,0,0)' }}
                enter={[
                    { opacity: 1, transform: 'translate3d(0%,0,0)' },
                    { transform: 'none', immediate: true}
                ]}
                leave={{ opacity: 0, transform: 'translate3d(-50%,0,0)', position: 'absolute', top: 0, left: 0, width: "100%" }}
            >
                 {(loc, state) => style => (   
                    <Switch location={state === 'update' ? location : loc}>
                        <Route exact path="/" 
                            render={(props) => <HomePage style={style} catalogs={data} />} />
                        
                        <Route path="/about-us"
                            render={(props) => <AboutUsPage style={style} />} 
                        />
                        <Route path="/contact" 
                            render={(props) => <ContactPage style={style} />} 
                        />             
                        <Route path="/checkout" 
                            render={(props) => <CheckoutPage style={style} />} 
                        />    
                        
                        <Route
                            render={(props) => <NotFoundPage style={style} />} 
                        />                            
                    </Switch>
                 )}
            </Transition>
        )} 
    />

The problem is when I redirect to another view, there is error messages shown on console:

Uncaught TypeError: entry.interpolation.calc is not a function at renderprops.js:1189 at Array.reduce () at Controller.update (renderprops.js:1171) at Spring.render (renderprops.js:1541) at finishClassComponent (react-dom.development.js:17485) at updateClassComponent (react-dom.development.js:17435) at beginWork (react-dom.development.js:19073) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at beginWork$1 (react-dom.development.js:23964) at performUnitOfWork (react-dom.development.js:22776) at workLoopSync (react-dom.development.js:22707) at renderRootSync (react-dom.development.js:22670) at performSyncWorkOnRoot (react-dom.development.js:22293) at react-dom.development.js:11327 at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at flushSyncCallbackQueueImpl (react-dom.development.js:11322) at flushSyncCallbackQueue (react-dom.development.js:11309) at discreteUpdates$1 (react-dom.development.js:22420) at discreteUpdates (react-dom.development.js:3756) at dispatchDiscreteEvent (react-dom.development.js:5889) (anonymous) @ renderprops.js:1189 update @ renderprops.js:1171 render @ renderprops.js:1541 finishClassComponent @ react-dom.development.js:17485 updateClassComponent @ react-dom.development.js:17435 beginWork @ react-dom.development.js:19073 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 performUnitOfWork @ react-dom.development.js:22776 workLoopSync @ react-dom.development.js:22707 renderRootSync @ react-dom.development.js:22670 performSyncWorkOnRoot @ react-dom.development.js:22293 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 discreteUpdates$1 @ react-dom.development.js:22420 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 index.js:1 The above error occurred in the component:
at Spring (http://localhost:3000/static/js/0.chunk.js:57878:5)
at KeyframesImpl (http://localhost:3000/static/js/0.chunk.js:58089:5)
at Transition (http://localhost:3000/static/js/0.chunk.js:58257:5)
at Route (http://localhost:3000/static/js/0.chunk.js:53390:29)
at SwitchRouteBlock (http://localhost:3000/static/js/main.chunk.js:2147:89)
at div
at Router (http://localhost:3000/static/js/0.chunk.js:53025:30)
at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:52645:35)
at CartProvider (http://localhost:3000/static/js/main.chunk.js:5546:5)
at FFMenuContextProvider (http://localhost:3000/static/js/main.chunk.js:5866:5)
at Main
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I have no idea about this, I have spent couple of days on this, so please does anyone give me hands on this. Cheers,

Fang Fang Fang Fang · Accepted Answer · 2021-01-29T09:31:07

After digging deep from google, I figured it out by this way,

  let _transform = transform.interpolate( ( t ) => { 
                            console.log(t);
                            return( t === 'translate3d(0%,0,0)' ? 'none' : t ) 
                        })

we can use transform.interpolate to set 'none' value, and pass into children component.

Example code below:

<Route 
            render={({ location, ...rest }) => (
                <Transition
                    native
                    items={location}
                    //keys= {location.pathname.split('/')[1]}
                    //We use pathname as key here
                    keys= {location.pathname}

                    // from= {{ opacity: 0 }}
                    // enter={{ opacity: 1 }}
                    // leave={{ opacity: 0, position: 'absolute', top: 0, left: 0, width: "100%" }}
                    from={{ opacity: 0, transform: 'translate3d(100%,0,0)' }}
                    enter={[
                        { opacity: 1, transform: 'translate3d(0%,0,0)' },
                        // { transform: 'none', immediate: true}
                    ]}
                    leave={{ 
                        opacity: 0, 
                        transform: 'translate3d(-50%,0,0)', 
                        position: 'absolute', 
                        top: 0, 
                        left: 0, 
                        width: "100%" 
                    }}
                >
                    {(loc, state) => ({transform, ...style}) => {   

                        //console.log(transform.interpolate((t)=>(t)));
                        let _transform = transform.interpolate( ( t ) => { 
                            console.log(t);
                            return( t === 'translate3d(0%,0,0)' ? 'none' : t ) 
                        })
                        

                        return(
                            <Switch location={state === 'update' ? location : loc}>
                                <Route exact path="/" 
                                    render={(props) => <HomePage style={{...style, transform : _transform}} catalogs={data} />} />
                                
                                <Route path="/about-us"
                                    render={(props) => <AboutUsPage style={{...style, transform : _transform}} />} 
                                />
                                <Route path="/contact" 
                                    render={(props) => <ContactPage style={{transform : _transform, ...style}} />} 
                                />             
                                <Route path="/checkout" 
                                    render={(props) => <CheckoutPage style={{transform : _transform, ...style}} />} 
                                />    
                                    
                                <Route
                                    render={(props) => <NotFoundPage style={{transform : _transform, ...style}} />} 
                                />                            
                            </Switch>
                        )
                    }}
                </Transition>
            )} 
        />

Hope this could help someone, or if anyone does have better solution, that will be great to leave here.

React spring transition setting 'none' to transform in enter

1 Answers