javascript - How to animate a specific piece of the component using React Router Transition animations

Question

I want to animate a transition of my list for when one of the items is clicked and the detail page shows up next to it. Right now the way my router is set up, I have a switch and some private routes leading to the same component using exact paths. That is to say the /items and /items/:id exact paths both lead to the same component which is a container:

              <Switch>
                <PrivateRoute exact path="/items" component={ItemContainer} /> 
                <PrivateRoute exact path="/items/:id" component={ItemContainer} />         
              </Switch>   

Note I have other routes, these are just the pertinent ones. The container then renders other children based on the params of the of the url (such as id). This is so I can keep my list and filter children components in the container at all times because I like the list mounted even when the detail is present.

  <div className={classes.root}>
      <IconButton onClick={() => setOpenDrawer(!openDrawer)} className={classes.drawerIconContainer}>
          <img src={filter_arrow_right} alt='filter-open-button' className={classes.drawerIcon}/>
      </IconButton>
      <SwipeableDrawer
        classes={{ paper: classes.drawer }}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
        open={openDrawer}
        variant="persistent"
        anchor="left"
        onClose={() => setOpenDrawer(false)}
        onOpen={() => setOpenDrawer(true)}
      >  
        {renderFilter()}
      </SwipeableDrawer>  
      <Grid container justify={item ? 'space-evenly' : 'flex-start'} className={classes.cardGrid}>    
              <Grid 
                  item xs={3} md={3} lg={item ? 3 : 8} 
                  style={!item ? {marginRight: 'auto'}: null} 
                  className={clsx(classes.list, {[classes.listShift]: openDrawer,})}
              >        
                <ItemList 
                  filteredItems={filteredItems} 
                  fullDisplay={!item} 
                  transitionDuration={transitionDuration} 
                  items={items} 
                  height={height} 
                /> 
              </Grid> 
              <Grid item xs={12} md={8} lg={6} 
                style={item ? null: {display: 'none'} } 
                ref={elementDOM} 
                className={classes.detail}>
                  {renderDetail()}
              </Grid>
           </Grid>
        </div>

I have styled the components using Material UI's class system. My goal is to animate the list shrinking into its spot when an item is clicked and the detail appears. Right now when an item is clicked the detail just appears and the list changes grid columns, there is no animation. I'd like to have an animation of the list shrinking and moving to the left like it does when the numbers of columns it takes changes using Material UI's grid system as I have coded above. I have tried React Router transitions, but it does not seem I can control certain parts of the component, and I have tried clsx classes, but the animation only plays before or after the DOM has changed, and doesn't shrink in the right way.

Answer 1

等待大神答复