here my demo: note: use your browser console instead of the Stackblitz's one. Seems the browser console is much more plete in terms of information_feedback

I would trigger animation using ReactJS ref's references instead of changing className inside the element's scope. Currently nothing is happening.

What I may missing?

here my Reacts' snippets:

ponent

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

  ponentDidMount(){ 
    // 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'));

stylesheet

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;
    }
}

thanks for any hint

here my demo: https://stackblitz./edit/react-pwdkse note: use your browser console instead of the Stackblitz's one. Seems the browser console is much more plete in terms of information_feedback

I would trigger animation using ReactJS ref's references instead of changing className inside the element's scope. Currently nothing is happening.

What I may missing?

here my Reacts' snippets:

ponent

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

  ponentDidMount(){ 
    // 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'));

stylesheet

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;
    }
}

thanks for any hint

• javascript
• reactjs

Share Improve this question Follow edited Nov 10, 2019 at 15:24 Diagathe Josué asked Nov 10, 2019 at 14:38 Diagathe JosuéDiagathe Josué 12.2k1414 gold badges4949 silver badges9393 bronze badges 2

• related question: stackoverflow./questions/36403101/toggle-class-in-react – Diagathe Josué Commented Nov 10, 2019 at 14:57
• CSS animation only happens when the DOM element is created; did you mean CSS transition? see also stackoverflow./questions/20586143/… – Aprillion Commented Nov 10, 2019 at 15:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You just have to change this

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

To:

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