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

Question

这里是我的演示：https://stackblitz.com/edit/react-pwdkse注意：使用浏览器控制台，而不是Stacklitz的控制台。似乎浏览器控制台在信息反馈方面要完整得多

我会使用ReactJSref的引用来触发动画，而不是在元素的范围内更改className。目前什么都没有发生。

我可能缺少什么？

这里是我的反应片段：

组件

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(){ 
// empty scope right now
}
triggerAnimation=()=>{ 
console.log("trigger animateRef animation")
//   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 (
<div>
<p>
Start editing to see some magic happen :)
</p>
<div className="animatedElementStyle" ref={this.animateRef}>
I am rendered !
</div>
<button onClick={this.triggerAnimation}>
trigger animation
</button>
</div>
);
}
}
render(<App />, 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;
}
}

感谢任何提示

Answer 1

您只需要更改此

this.animateRef.current.className.concat(`animation_trigger`)

收件人：

this.animateRef.current.classList.add(`animation_trigger`);