Button appears briefly after animation

[mmarovich]

Is anyone else experiencing this where- after the button disintegrates- it flashes briefly just before the 'visibility: hidden' style is applied to the wrapper. Kinda ruins the effect...

My code is as follows:

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

        this.state = {
            hidden: false
        }
    }

    render() {
        return (
            <ParticleEffectButton
                color='red'
                hidden={this.state.hidden}
                // duration={2000}
                // type={['circle','rectangle','triangle'][Math.floor(Math.random()*3)]}
            >
                <button
                    className="button button3"
                    onClick={() => this.setState({hidden: true})}
                >Click Me!</button>
            </ParticleEffectButton>
        )
    }
}

Nothin' fancy.

[mmarovich]

Okay, so I was able to create a temporary fix for this bug, though I would prefer not to have to do this.

1. create another boolean in the state.

this.state = {
            hidden: false,
            initialHide: false
        }

2. Swap this state within a setTimeout function equal to the duration of the animation, and trigger function with onBegin prop.

preHide = () => setTimeout(() => {this.setState({ initialhide: true })},2000)

<ParticleEffectButton
                color='red'
                hidden={this.state.hidden}
                duration={2000}
                // type={['circle','rectangle','triangle'][Math.floor(Math.random()*3)]}
                onBegin={this.preHide}
            >

3. manipulate visibility style within the wrapped element

<button
        className={`button button3`}
        style={{ visibility: this.state.initialhide ? "hidden" : "visible" }}
        onClick={() => this.setState({ hidden: true })}
>Click Me!</button>

This works for now:

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

        this.state = {
            hidden: false,
            initialHide: false
        }
    }

    preHide = () => setTimeout(() => {this.setState({ initialhide: true })},2000)

    render() {
        return (
            <ParticleEffectButton
                color='red'
                hidden={this.state.hidden}
                duration={2000}
                // type={['circle','rectangle','triangle'][Math.floor(Math.random()*3)]}
                onBegin={this.preHide}
            >
                <button
                    className={`button button3`}
                    style={{ visibility: this.state.initialhide ? "hidden" : "visible" }}
                    onClick={() => this.setState({ hidden: true })}
                >Click Me!</button>
            </ParticleEffectButton>
        )
    }
}

I wouldn't close this issue though, because this is a bit ungraceful.