如何在ReactJS中使用ref来触发动画。

这是我的演示：https://stackblitz.com/edit/react-pwdkse 注意：请使用您的浏览器控制台而不是Stackblitz的控制台。浏览器控制台在信息反馈方面更加完整。

我希望使用ReactJS的ref引用来触发动画，而不是在元素范围内更改className。目前没有任何反应。

我可能漏掉了什么吗？

这是我的React代码片段：

组件

import React, { Component } from 'react';
import { render } from 'react-dom'; 
import './style.module.css';
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
     this.animateRef = React.createRef();
  //  this.triggerAnimation = this.triggerAnimation.bind(this);
  }
  componentDidMount(){ 
    // 现在是空的范围
  }
   triggerAnimation=()=>{ 
      console.log("触发animateRef动画")
      //   this.animateRef.current.style.animationName="animateElement"
      //  this.animateRef.current.style.animation="1.5s 4.3s 3 alternate forwards"
       this.animateRef.current.className.concat(`animation_trigger`)
        console.log("animateRef: ", this.animateRef)
  }
  render() {
    return (
          开始编辑以查看一些神奇的事情 :)
            我被渲染了！
        
          触发动画
        
    );
  }
}
render(, document.getElementById('root'));

样式表

h1, p {
  font-family: Arial;
}
.animatedElementStyle{ 
    position:absolute;
    top:61%;
    left:10%;
    width:15w;
    height:25vh;
    visibility: hidden; 
    opacity:0;    
}
.animation_trigger{
    animation: animateElement 1.5s 0.5s 3 alternate forwards;
}
@keyframes animateElement{
    from{  
        opacity:0;
        visibility:hidden; 
    }
    100%{
        transform: translate(15%,0);
        opacity:1;
        visibility:visible;
        color:orange;
        font-size:3em;
    }
}

感谢任何提示。