问带淡入覆盖和对话框的模态组件禁用，直到动画结束。
EN

Stack Overflow用户

提问于 2020-02-12 02:07:13

回答 6查看 394关注 0票数 1

我试图重写我的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);
    };

为澄清更新的源代码

javascript

reactjs

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 6

Stack Overflow用户

发布于 2020-02-12 02: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>
  )
}

票数 1

Stack Overflow用户

发布于 2020-02-12 02: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>
    )
  }
}