如何让 'Reactjs Modal' 出现在屏幕上从右到中飞

Question

我有一个反应模式。调用时，它会在浏览器中心打开 window。我想对 Modal 打开样式进行一些更改。调用 Modal 时，它应该从右侧飞到中心。我不知道 property/attribute 可以实现这样的外观。有人可以帮忙吗？这是我目前的造型：

customStyles = {
overlay: {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: 'rgba(255,255,255,0.75)'
},
content: {
  display: 'relative',
  position: 'absolute',
  textAlign: 'Center',
  top: '20%',
  left: '20%',
  right: '20%',
  bottom: '4%',
  border: '6px solid #ccc',
  background: '#fff',
  overflow: 'auto',
  WebkitOverflowScrolling: 'touch',
  borderRadius: '4px',
  outline: 'none',
  padding: '20px',
  paddingLeft: '40px'
}};

Answer 1

添加

transform: 'translate(-50%, -50%)'

给你的 Content class.

另一种选择是使用不同的 React 模态组件，例如 https://www.npmjs.com/package/react-modal-slider

Answer 2

添加这个class名字

示例：

.modal-center{
      animation: left-to-center linear 1s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      -webkit-animation: left-to-center linear 1s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -moz-animation: left-to-center linear 1s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -o-animation: left-to-center linear 1s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -ms-animation: left-to-center linear 1s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
    }

    @keyframes left-to-center{
      0% {
        transform:  translate(250px,0px)  ;
      }
      100% {
        transform:  translate(0px,0px)  ;
      }
    }

    @-moz-keyframes left-to-center{
      0% {
        -moz-transform:  translate(250px,0px)  ;
      }
      100% {
        -moz-transform:  translate(0px,0px)  ;
      }
    }

    @-webkit-keyframes left-to-center {
      0% {
        -webkit-transform:  translate(250px,0px)  ;
      }
      100% {
        -webkit-transform:  translate(0px,0px)  ;
      }
    }

    @-o-keyframes left-to-center {
      0% {
        -o-transform:  translate(250px,0px)  ;
      }
      100% {
        -o-transform:  translate(0px,0px)  ;
      }
    }

    @-ms-keyframes left-to-center {
      0% {
        -ms-transform:  translate(250px,0px)  ;
      }
      100% {
        -ms-transform:  translate(0px,0px)  ;
      }
    }

如何让 'Reactjs Modal' 出现在屏幕上从右到中飞

How to make 'Reactjs Modal' appearing in screen flying from right to centre

css

modal-dialog

reactjs