Question

当单击其中一个项目并且详细信息页面显示在它旁边时，我想为我的列表的过渡设置动画。现在我的路由器的设置方式，我有一个交换机和一些使用精确路径通向同一组件的私有路由。也就是说，/items 和 /items/:id 的精确路径都指向作为容器的同一个组件：

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

注意我还有其他路线，这些只是相关的路线。然后容器根据 url 的参数（例如 id）呈现其他子项。这样我就可以随时保留我的列表并过滤容器中的子组件，因为即使存在详细信息，我也喜欢挂载列表。

  <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>

我使用 Material UI 的类系统为组件设计了样式。我的目标是在单击项目并显示详细信息时将列表设置为动画缩小到其位置。现在当一个项目被点击时，细节就会出现，列表会改变网格列，没有动画。我想要一个列表缩小并向左移动的动画，就像它使用我上面编码的 Material UI 网格系统更改列数时所做的那样。我尝试过 React Router 转换，但似乎我无法控制组件的某些部分，并且我尝试过 clsx 类，但是动画只在 DOM 更改之前或之后播放，并且没有以正确的方式收缩.

如何使用 React Router Transition 动画为组件的特定部分设置动画

0 个答案: