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

Question

Background

I am trying to make an element disappear after the animation ends (I am using animate.css to create the animations).

The above 'copied' text uses animated fadeOut upon clicking the 'Copy to Journal Link'. Additionally, the above demo shows that it takes two clicks on the link to toggle the span containing the text 'copied' from displayed to not displayed.

According to the animate.css docs, one can also detect when an animation ends using:

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

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

My Problem

However, within the componentDidMount() tooltip is null when attempting to integrate what animate.css docs suggest.

What am I doing wrong? Is there a better way to handle this behavior?

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 gets called only once during the inital mount. I can see that in the inital component state, copied is false , hence #clipboard-tooltip never gets rendered. That is why tooltip is null.

Instead try this :

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 gets called for every prop/state change and hence as soon as copied is set to true, the event handler is set inside componentDidUpdate . I have added a condition based on your requirement, so that it doesn't get executed everytime. Feel free to tweak it as needed.

Answer 2

Using query selectors in React is a big NO. You should NEVER do it. (not that that's the problem in this case)

But even though it's not the problem, it will fix your problem:

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