Question

背景

我试图使元素在动画结束后消失（我正在使用animate.css来创建动画）。

上面的“复制”文本在单击“复制到日记链接”时使用animated fadeOut。此外，以上演示还显示了该链接的两次点击，以将包含“复制”文本的范围从显示切换为不显示。

根据animate.css文档，还可以使用以下命令检测动画何时结束：

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

我的问题

但是，在尝试整合animate.css文档所建议的内容时，在componentDidMount() tooltip中是null。

我在做什么错？有没有更好的方法来处理这种行为？

ClipboardBtn.js

import React, { Component } from 'react'

import CopyToClipboard from 'react-copy-to-clipboard'

class ClipboardBtn extends Component {
    constructor(props) {
        super(props)

        this.state = {
            copied: false,
            isShown: true,
        }
    }

    componentDidMount() {
        const tooltip = document.querySelector('#clipboard-tooltip')
        tooltip.addEventListener('animationend', this.handleAnimationEnd)
    }

    handleAnimationEnd() {
        this.setState({
            isShown: false,
        })
    }

    render() {
        const { isShown, copied } = this.state
        const { title, value } = this.props

        return (
            <span>
                <CopyToClipboard onCopy={() => this.setState({ copied: !copied })} text={value}>
                    <span className="clipboard-btn">{title}</span>
                </CopyToClipboard>
                {this.state.copied ? (
                    <span
                        id="clipboard-tooltip"
                        className="animated fadeOut"
                        style={{
                            display: isShown ? 'inline' : 'none',
                            marginLeft: 15,
                            color: '#e0dbda',
                        }}
                    >
                        Copied!
                    </span>
                ) : null}
            </span>
        )
    }
}
export default ClipboardBtn

Answer 1

componentDidMount在初始安装期间仅被调用一次。我可以看到，在初始组件状态下，copied是false，因此#clipboard-tooltip永远不会被渲染。这就是为什么工具提示为空的原因。

请尝试以下方法：

componentDidUpdate(prevProps, prevState) {
  if(this.state.copied === true && prevState.copied === false) {
    const tooltip = document.querySelector('#clipboard-tooltip')
    tooltip.addEventListener('animationend', this.handleAnimationEnd)
  }
  if(this.state.copied === false && prevState.copied === true) {
    const tooltip = document.querySelector('#clipboard-tooltip')
    tooltip.removeEventListener('animationend', this.handleAnimationEnd)
  }
}

componentDidUpdate会在每次prop / state更改时被调用，因此，copied设置为true时，事件处理程序将在componentDidUpdate内设置。我已根据您的要求添加了一个条件，以便不会每次都执行该条件。随时根据需要进行调整。

Answer 2

在React中使用查询选择器不是一个大问题。你绝对不要这样做。（不是这种情况下的问题）

但是，即使这不是问题，它也会解决您的问题：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

https://reactjs.org/docs/refs-and-the-dom.html

React-动画结束后如何使元素消失？

背景

我的问题

ClipboardBtn.js

2 个答案: