如何忽略抽屉的过渡？

Question

我有两个抽屉（左侧和底部）。当左侧抽屉打开时，我想使用transition / animation。

增加marginLeft并减小底部抽屉的宽度。

我尝试在抽屉纸上添加内联过渡样式。但是样式将被element.style {transition：transform 225ms cube-bezier（0，0，0.2，1）0ms;}

替换。

Sample in codesandbox

  <Drawer 
    ...

    classes={{
      paper: classes.transitionIn,
    }}

    ...

    PaperProps = {{
      style:{
        ...

        transition: 'transform 990ms cubic-bezier(0, 0, 0.2, 1) 0ms',
      }
    }}
  >
    {children}
  </Drawer>

是否可以将动画添加到底部抽屉？

Answer 1

[我只是找到一种方法，通过向抽屉的SlideProps添加回调函数（onEntering）来覆盖根节点的过渡样式。

  <Drawer 
    ...

    classes={{
      paper: classes.transitionIn,
    }}

    ...

    SlideProps = {{
      onEntering: (node, isAppearing)=>{
        node.style.webkitTransition  = theme.transitions.create(['-webkit-transform', 'margin', 'height', 'width', 'top', 'left'], {
          easing: theme.transitions.easing.easeOut,
          duration: transitionTime,
        });

        node.style.transition   = theme.transitions.create(['transform', 'margin', 'height', 'width', 'top', 'left'], {
          easing: theme.transitions.easing.easeOut,
          duration: transitionTime,
        });
      },
    }}

    PaperProps = {{
      style:{
        ...
      }
    }}
  >
    {children}
  </Drawer>