Как отменить переход ящика? - PullRequest
Новая
       46

Как отменить переход ящика?

0 голосов
/ 04 октября 2019

У меня есть два ящика (левый и нижний). Когда открывается левый ящик, я хочу увеличить marginLeft и уменьшить ширину нижнего ящика с помощью transition / animation .

Я пытаюсь добавить стиль встроенного перехода к бумаге ящика. Но затем стиль будет заменен на element.style {transition: transform 225ms cubic-bezier (0, 0, 0.2, 1) 0ms;}

Пример в кодах andbox 


  <Drawer 
    ...

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

    ...

    PaperProps = {{
      style:{
        ...

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

Есть ли способ добавить анимацию в нижний ящик?

1 Ответ

0 голосов
/ 21 октября 2019

Я просто нашел способ переопределить стиль перехода корневого узла, добавив функцию обратного вызова (onEntering) в SlideProps Drawer. 

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