反应 - 如何等待和淡出？

Question

我有一个警告框来确认用户已成功订阅:

<div className="alert alert-success">
    <strong>Success!</strong> Thank you for subscribing!
</div>    

当用户发送电子邮件时,我将"订阅"状态更改为true.

我想要的是:

• 订阅状态为true时显示警告框
• 等待2秒钟
• 让它淡出

我怎样才能做到这一点？

Answer 1

由于React将数据呈现为DOM,因此您需要保留一个首先具有一个值的变量,然后保留另一个变量,以便首先显示该消息然后隐藏该消息.您可以直接使用jQuery删除DOM元素fadeOut,但操纵DOM可能会导致问题.

所以,这个想法是,你有一个属性,可以有两个值之一.最接近的实现是布尔值.由于消息框始终在DOM中,因此它是某个元素的子元素.在React中,元素是渲染组件的结果,因此在渲染组件时,它可以包含任意数量的子组件.所以你可以添加一个消息框.

接下来,此组件必须具有您可以轻松更改的特定属性,并且完全确定一旦更改它,组件就会使用新数据重新呈现.它是组件状态!

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showingAlert: false
    };
  }

  handleClickShowAlert() {
    this.setState({
      showingAlert: true
    });

    setTimeout(() => {
      this.setState({
        showingAlert: false
      });
    }, 2000);
  }

  render() {
    return (
      <div>
        <div className={`alert alert-success ${this.state.showingAlert ? 'alert-shown' : 'alert-hidden'}`}>
          <strong>Success!</strong> Thank you for subscribing!
        </div>
        <button onClick={this.handleClickShowAlert.bind(this)}>
          Show alert
        </button>
        (and other children)
      </div>
    );
  }
}

在这里,您可以看到,对于消息框,根据组件状态的属性值(真值)设置alert-shown或者alert-hidden设置classname showingAlert.然后,您可以使用transitionCSS属性来隐藏/显示外观平滑.

因此,显然,您需要更新特定事件的组件状态,而不是等待用户单击按钮以显示消息框.

这应该是好的开始.接下来,尝试使用CSS转换display和height消息框的CSS属性,以查看它的行为方式以及在这些情况下是否发生平滑过渡.

祝好运!

PS.请参阅Codepen.

Answer 2

正确的方法是使用 Transition handler 进行淡入/淡出

在 ReactJS 中，有一个合成事件等待淡出完成：onTransitionEnd。

注意不同的处理程序有不同的 CSS 效果。淡入淡出是一种过渡效果，而不是动画效果。

这是我的例子：

const Backdrop = () => {
  const {isDropped, hideIt} = useContext(BackdropContext);
  const [isShown, setState] = useState(true);
  const removeItFromDOM = () => {
    debugger
    setState(false)
  };
  return isShown
    ? <div className={`modal-backdrop ${isDropped ? 'show' : ''} fade` } onClick={hideIt} onTransitionEnd={removeItFromDOM}/>
    : null
}