带淡入覆盖和对话框的模态组件禁用，直到动画结束。
带淡入覆盖和对话框的模态组件禁用，直到动画结束。
提问于 2020-02-12 10:07:13
我试图重写我的JS插件之一，作为学习的一种方式。
我有一个面板，当隐藏/显示需要更新的几个类名，以及一些需要等待css动画完成(为什么定时器)。
我该怎么做才能做出反应呢？使用querySelector更改类名似乎是非常错误的.？
详细解释
当showPanel被触发时，需要发生以下情况
"am-animation-done") /html元素需要更新css (因此我添加了类)、
- 、现有的覆盖消失在(向其添加类)、
- 中显示模态div (为其添加类)、
- 、模态div被告知在动画运行后处于活动状态(因此，计时器和类
- )。
我最希望拥有/学习的是在reactjs中这样做的最佳实践。我正在考虑切换状态，当触发时，将状态设置为可见/隐藏，如果设置为“可见”，则会发生下面的类更改。我最大的问题是计时器。
showPanel = () => {
document.querySelector('body').classList.add('am-modal-locked');
document.querySelector('html').classList.add('am-modal-locked');
document.querySelector('.am-overlay').classList.add('fadein');
document.querySelector('.am-modal').classList.add('am-show');
const timer = setTimeout(() => {
document.querySelector('.am-modal').classList.add('am-animation-done');
}, 500);
return () => clearTimeout(timer);
};
hidePanel = () => {
document.querySelector('.am-modal').classList.remove('am-show');
document.querySelector('.am-modal').classList.remove('am-animation-done');
document.querySelector('.am-overlay').classList.add('fadeout');
const timer = setTimeout(() => {
document.querySelector('.am-overlay').classList.remove('fadein');
document.querySelector('.am-overlay').classList.remove('fadeout');
document.querySelector('body').classList.remove('am-modal-locked');
document.querySelector('html').classList.remove('am-modal-locked');
}, 500);
return () => clearTimeout(timer);
};为澄清更新的源代码
回答 6
Stack Overflow用户
发布于 2020-02-12 10:17:50
这是一个简单得多的反应，下面是一个钩子的例子
function Panel() {
const [hidden, setHidden] = useState(false);
const toggleCallback = useCallback(() => setHidden(hidden => !hidden), []);
const cls = hidden ? 'hide' : 'show';
return (
<div className={cls}>
<button onClick={toggleCallback}>Toggle</>
</div>
)
}Stack Overflow用户
发布于 2020-02-12 10:10:45
是的，这不是一个很好的方法。相反，您也应该使用状态变量来切换类。不需要手动操作DOM。您可以在第一个setState的回调中设置超时，以再次更改状态。
也许是这样的：
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
class1: 'on',
class2: 'off'
}
}
toggle = () => {
this.setState({class1: 'off'}, () => {
setTimeout(() => {
this.setState({class2: 'on'})
}, 2000)
})
}
render() {
const {class1, class2} = this.state;
return (
<div>
<h1 className={`${class1} ${class2}`} onClick={this.toggle}>Class toggle</h1>
</div>
)
}
}Stack Overflow用户
发布于 2020-02-12 10:16:54
您可以使用该状态来对组件中的类名进行显式更改。
className={this.state.isPanelVisible}也许，您可以将变量设置为当前需要的类，而不是将其设置为布尔值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60185781
复制相关文章
相似问题
腾讯云开发者
