Question

过渡有效，但当我有可见性：隐藏时，我会在视口右侧出现多余的空格。如果我设置display：none，我将失去过渡效果。任何想法如何做这个w / react，vanilla js或css？我不想使用第三方库（反应除外）。

JS

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {hidden: true};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      hidden: !prevState.hidden
    }));
  }

  render() {
    return (
      <div>
      <button onClick={this.handleClick}>
        {this.state.hidden ? 'Show' : 'Hide'}
      </button>
      <div className={"modal-overlay " + (this.state.hidden ? "hidden" : "open")} onClick={this.handleClick}>
        <div className="modal">
          Modal
        </div>
      </div>
        </div>
    );
  }
}

ReactDOM.render(
  <Modal />,
  document.getElementById('root')
);

CSS

.modal-overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: -40vw;
  z-index: 20;
  cursor: pointer;
  transition: all ease .5s;
  &.open {
    right: 0px;
  }
}

.modal {
  box-shadow: -1px 4px 5px 1px hsla(0, 0%, 0%, 0.5);
  background-color: #fefefe;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  padding-left: none;
  padding-right: none;
  cursor: auto;
}

.hidden {
  visibility: hidden;
}

Answer 1

问题在于您为CSS属性设置了动画但是组件，因此DOM元素仍然在DOM流中，因此水平滚动条可见。

我建议你使用React Transition Group来删除组件，然后执行 React方式。以下是使用RTG切换组件的简单示例：

https://codesandbox.io/s/DkEmExJG6

反应组件动画

1 个答案: