如何覆盖抽屉的过渡？

Question

我有两个抽屉（左边和底部）。当左边的抽屉打开时，我想增加 marginLeft 并减少底部抽屉的宽度 transition/animation.

我尝试为抽屉的纸张添加内联过渡样式。但是样式将被替换为 element.style {transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;}


  <Drawer 
    ...

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

    ...

    PaperProps = {{
      style:{
        ...

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

有什么办法可以给底部抽屉添加动画吗？

Answer 1

我刚刚找到一种方法来覆盖根节点的过渡样式，方法是向 Drawer 的 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>

如何覆盖抽屉的过渡？

How to override the transition of drawer?

reactjs

material-ui

drawer