className does not exist in the DOM, it’s a JSX abstraction used instead of class since that is a reserved JavaScript word. As you are working with a virtual DOM in React (or preact, I assume, not totally familiar with it), all document statements such as getElementById are also not going to function as expected.

I would consider two options here, using Refs or State. With Refs, you can track a DOM node and update it directly, although this is not a dynamic or generally advisable solution as you have to declare all your Refs beforehand. But hey, it works.

textRef = createRef();
buttonRef = createRef();

buttonExit = () => {
    textRef.current.classList.add('slide-out-top');
    buttonRef.current.classList.add('slide-out-bottom');
}

render = () => {
    return (
        ...your code...
        <div id="textToExit" ref={this.textRef}...>
        <button type="button" id="buttonToExit" ref={this.buttonRef}...>
        ...your code...
    )
}

With State, you can activate different parts of a class list selectively based on the current state of the component.

state = {
    exit: false
}

buttonExit = () => {
    this.setState({exit: true});
}

render = () => {
    const buttonExit = this.state.exit ? 'slide-out-bottom' : '';
    const textExit = this.state.exit ? 'slide-out-top' : '';

    return (
        ...your code...
        <div id="textToExit" className={`pt-5 pb-3 font-weight-bold text-light h1 ${textExit}`}...>
        <button type="button" id="buttonToExit" className={`btn btn-outline-light ${buttonExit}`}...>
        ...your code...
    )
}

I want animate my button with onclick but it is not working:

The css file (style.css):

.slide-out-top {
    -webkit-animation: slide-out-top 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: slide-out-top 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
.slide-out-bottom {
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}

the jsx file (preact):

import { h, Component } from 'preact';
import "../../style/index.css";
import "../../style/bootstrap.min.css";
import "./style.css";

export default class Home extends Component {

    buttonExit = () => {
        document.getElementById('buttonToExit').className = 'btn btn-outline-light slide-out-bottom';
        document.getElementById('textToExit').className = 'pt-5 pb-3 font-weight-bold text-light h1 slide-out-top';
    }

    render = () => {
        return (
            <div className="App vh-100">
                <div className="h-70 container">
                    <div className="py-5"> </div>
                    <div className="py-5" style={{ width: "100%" }}>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm"> </div>
                                <div class="col text-center">
                                    <div id="textToExit" className="pt-5 pb-3 font-weight-bold text-light h1">Accès en ligne</div>
                                    <button type="button" id="buttonToExit" onClick={this.buttonExit} className="btn btn-outline-light">Se Connecter</button>
                                </div>
                                <div class="col-sm"> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

The style.css is in the same folder than the js file.

My function is supposed to modify the “className” of the button and text element.
After a few tests, the function seems to be well called and normally, the animations are functional.

Somebody can help me please ?