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

Posted

技术标签:

【中文标题】如何在 ReactJS 中使用 ref 触发动画【英文标题】:How trigger animation using ref in ReactJS 【发布时间】:2020-03-06 10:50:12 【问题描述】:

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

我会使用 ReactJS ref 的引用来触发动画,而不是在元素范围内更改 className。目前没有任何事情发生。

我可能会错过什么?

这里是我的 Reacts 的 sn-ps:

组件

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;
    

感谢任何提示

【问题讨论】:

相关问题:***.com/questions/36403101/toggle-class-in-react CSS 动画仅在创建 DOM 元素时发生;你的意思是CSS transition?另见***.com/questions/20586143/… 【参考方案1】:

你只需要改变这个

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

收件人:

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

【讨论】:

感谢您的回答,您知道或知道为什么 classList 有效而 className 失败的原因吗? 是的,String.concat 不会更改字符串。它返回一个与前一个字符串连接的新字符串。 并确保删除('animation_trigger')中的

以上是关于如何在 ReactJS 中使用 ref 触发动画的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS - 使用反应钩子防止模态的初始动画

如何使用 refs 更改 ReactJS 中的样式类?

React中使用ref

如何在 ReactJS 中触发模型更改的重新渲染?

reactjs中REF和INNERREF的区别

我如何在 reactjs + typescript (钩子)中使用 useRef 将子状态值传递给父级