gpt4 book ai didi

reactjs - 如何等待并淡出元素?

转载 作者:行者123 更新时间:2023-12-03 13:56:05 26 4
gpt4 key购买 nike

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

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

当用户发送电子邮件时,我将“已订阅”状态更改为 true。

我想要的是:

  • 订阅状态为true时显示警告框
  • 等待 2 秒
  • 使其淡出

我该怎么做?

最佳答案

2021 年 5 月更新:正如 tolga 和 Alexey Nikonov 在他们的答案中正确指出的那样,可以将警报显示时长(在原始问题中为 2 秒)的控制权交给 transition-delay 属性和基于transitionend DOM event的智能组件状态管理。另外,hooks现在建议处理组件的内部状态,而不是 setState 。所以我更新了我的答案:

function App(props) {
const [isShowingAlert, setShowingAlert] = React.useState(false);

return (
<div>
<div
className={`alert alert-success ${isShowingAlert ? 'alert-shown' : 'alert-hidden'}`}
onTransitionEnd={() => setShowingAlert(false)}
>
<strong>Success!</strong> Thank you for subscribing!
</div>
<button onClick={() => setShowingAlert(true)}>
Show alert
</button>
(and other children)
</div>
);
}

然后在 CSS 的 alert-hidden 类中指定延迟:

.alert-hidden {
opacity: 0;
transition: all 250ms linear 2s; // <- the last value defines transition-delay
}

isShowingAlert 的实际变化实际上是近乎即时的:从 false 变为 true,然后立即从 true 变为 false。但由于转换到 opacity: 0 延迟了 2 秒,因此用户在这段时间内会看到该消息。

随意使用Codepen with this example .

<小时/>

由于 React 将数据渲染到 DOM 中,因此您需要保留一个变量,该变量首先具有一个值,然后再具有另一个值,以便先显示消息,然后隐藏消息。您可以使用 jQuery 的 fadeOut 直接删除 DOM 元素,但是 manipulating DOM can cause problems .

因此,我们的想法是,您有一个可以具有两个值之一的属性。最接近的实现是 bool 值。由于消息框始终位于 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-shownalert-hidden 类名,具体取决于 的值(真实性)组件状态的 >showingAlert 属性。然后您可以使用 transition CSS property使隐藏/显示外观平滑。

因此,显然,您需要更新某个事件的组件状态,而不是等待用户单击按钮来显示消息框。

这应该是一个很好的开始。接下来,尝试使用消息框的 CSS 过渡、displayheight CSS 属性,看看它的行为方式以及在这些情况下是否会发生平滑过渡。

祝你好运!

PS。请参阅 a Codepen for that .

关于reactjs - 如何等待并淡出元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42733986/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com