Javascript 如何在ReactJS中使用ref触发动画
这里是我的演示:注意:使用你的浏览器控制台,而不是Stackblitz的。在信息反馈方面,浏览器控制台似乎更加完整 我将使用ReactJSJavascript 如何在ReactJS中使用ref触发动画,javascript,reactjs,Javascript,Reactjs,这里是我的演示:注意:使用你的浏览器控制台,而不是Stackblitz的。在信息反馈方面,浏览器控制台似乎更加完整 我将使用ReactJSref的引用触发动画,而不是在元素的范围内更改类名。目前什么都没有发生 我可能错过了什么 下面是我的反应片段: 组件 import React, { Component } from 'react'; import { render } from 'react-dom'; import './style.module.css'; class App ext
ref
的引用触发动画,而不是在元素的范围内更改类名。目前什么都没有发生
我可能错过了什么
下面是我的反应片段:
组件
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;
}
}
谢谢你的任何提示你只需要改变这个
this.animateRef.current.className.concat(`animation_trigger`)
致:
相关问题:CSS动画仅在创建DOM元素时发生;你是说?另请参见感谢您的回答,您是否知道或了解classList工作而className失败的原因?是的,不更改字符串。它返回一个与前一个串接的新字符串。并确保在
('animation\u trigger}')
this.animateRef.current.classList.add(`animation_trigger`);