Javascript onClick后元素上的CSS动画

我想用onclick设置按钮的动画，但它不起作用：

css文件（style.css）：

。从顶部滑出{
-webkit动画：滑出顶部1s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
动画：滑出顶部1s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
}
@-webkit关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（-1000px）；
转换：translateY（-1000px）；
不透明度：0；
}
}
@关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（-1000px）；
转换：translateY（-1000px）；
不透明度：0；
}
}
.从底部滑出{
-webkit动画：滑出底部1s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
动画：滑出底部1s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
-webkit动画计时功能：轻松；
动画计时功能：轻松；
}
@-webkit关键帧从底部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（1000px）；
变换：translateY（1000px）；
不透明度：0；
}
}
@关键帧从底部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（1000px）；
变换：translateY（1000px）；
不透明度：0；
}
}

jsx文件（preact）：

从'preact'导入{h，Component}；
导入“../../style/index.css”；
导入“../../style/bootstrap.min.css”；
导入“/style.css”；
导出默认类Home extends组件{
buttonExit=（）=>{
document.getElementById（'buttonToExit'）。className='btn btn轮廓灯滑出底部'；
document.getElementById（'textToExit'）。className='pt-5 pb-3字体粗体文本轻h1滑出顶部'；
}
渲染=（）=>{
返回(
木质装饰
Se连接器
);
}
}

style.css

与js文件位于同一文件夹中

我的函数应该修改按钮和文本元素的“className”。 经过几次测试，该函数似乎调用得很好，通常情况下，动画都是功能性的

---

有人能帮我吗？

className

在DOM中不存在，它是一个JSX抽象，而不是

class

，因为它是一个保留的JavaScript字。当您在React中使用虚拟DOM时（或者我假设您不完全熟悉preact），所有的文档语句，例如

getElementById

也不会像预期的那样工作

我会考虑两种选择，使用<代码> REFS>代码>或<代码>状态< /代码>。使用

Refs

，您可以跟踪DOM节点并直接对其进行更新，尽管这不是一个动态的或通常可取的解决方案，因为您必须事先声明所有

Refs

。但是，嘿，它起作用了

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...
    )
}

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...
    )
}