javascript - My button component disables after it triggers a css animation. How can I avoid it?

Question

I was programming a React application. And I wanted to start very simple. I drew a cube in 3d perspective using css. With it I created a button. Whenever this button is clicked, the transition to the next side of the cube is being shown. I achieved this with the following code.

import React, {useState} from 'react';
import './App.css';

function App() {
  const [panel, setPanel] = useState(1);
  const handlePanelIncrement = () => {
    setPanel(panel + 1);
  };
  let boxArea;
  const rotateRight = () => {
    boxArea = document.getElementById('main-box-area');
    boxArea.style.transition = "transform 1s linear 0s";
    boxArea.style.transform = `rotate3d(0,1,0, -${panel*90}deg)`;
    handlePanelIncrement();
    boxArea=null;
  };

  return (
    <div className="App">
      <div className="app-body">
        <div className="cube-panel">
          <div className="wrapper">
              <div id="main-box-area" className="box-area">
                <div className="box front"/>
                <div className="box back"/>
                <div className="box left"/>
                <div className="box right"/>
              </div>
          </div>
          <div className="cube-actions">
            <button onClick={rotateRight}>Right</button>
          </div>
        </div>
      </div>
    </div>
  );
}

.App {
  text-align: center;
  height: 100%;
  width: 100%;
  margin:0px;
  display: flex;
  flex-direction: column;
}

.app-body{
  display: flex;
  width: 100%;
  height: 100%
}

.cube-panel{
  display: flex;
  flex-direction: column;
}
.cube-actions{
  width: 896px;
  display: flex;
  justify-content: space-around;
}

.wrapper{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  height: 482.3px;
  width: 896px;
  perspective: 1500px;
}

.box-area{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  position: relative;
  transform-style: preserve-3d;
}

.box{
  transform-style: preserve-3d;
  position: absolute;
  width:100px;
  height:100px;
  border: 2px solid black;
}

.front {
  transform: translateZ(50px);
  background-color: rgba(244, 50,50, 0.5);
}

.back {
 transform: translateZ(-50px);
  background-color: rgba(244, 50,50, 0.5);
}

.left {
  transform-origin: left;
  transform: translateZ(50px) rotateY(90deg);
  background-color: rgba(244, 50,50, 0.5);
}

.right {
  transform-origin: right;
  transform: translateZ(50px) rotateY(-90deg);
  background-color: rgba(244, 50,50, 0.5);
}

Everything works fine. But after the transition, the trigger-button can't be clicked anymore. It is disabled. What is curious is that if I click the button fast multiple times, the rotation works fine those many times. It is disabled when I wait like a second after it was triggered.

Does anybody know why does this happen? Or where am I making the mistake? maybe I have to declare the style attributes in a different way but I don't know how.. I searched everywhere but I had no success.

Thank you for your time!

question from:https://stackoverflow.com/questions/65863524/my-button-component-disables-after-it-triggers-a-css-animation-how-can-i-avoid

Answer 1

Waitting for answers