Question

我在React中制作了模态并且它工作正常，但我真的想添加一个小功能。当我点击按钮时，模态类正在变化，模态变得可见，但这会立即发生，我想添加一些过渡。

我的代码：在父方法中切换类和传递道具：

toggleModal() {
  this.setState({ visibleModal: !this.state.visibleModal });
}

<RegisterModal
  visible={this.state.visibleModal}
  toggleModal={this.toggleModal}
/>

儿童组成部分：

<div className={`modal ${props.visible ? 'modal--visible' : 'modal--invisible'}`}>

我的CSS：

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.modal--invisible {
  display: none;
}

.modal--visible {
  display: flex;
}

有人可以帮助我吗？

Answer 1

Possibly related

display属性无法顺利更改，只有固定值。它会立即从一个跳到下一个。您需要使用transition和类似opacity的内容来获得良好的淡入效果。

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  transition: opacity .5s; /* Opacity will fade smoothly */
}

.modal--invisible {
  opacity: 0;
  pointer-events: none; /* Makes the modal unclickable */
}

.modal--visible {
   opacity: 1; /* Modal is visible */
   pointer-events: initial; /* Modal is clickable */
}

当模态在React中可见时平滑过渡

1 个答案: