Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

Question

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

After implementing a Button from MUIv5, I noticed that the full animation only triggers when I hold down the button instead of with a simple click.

Is there a way to fix this so that the animation fully plays with just a single click? Any help is appreciated.

Below is the code snippet:

import Button from "@mui/material/Button";

export default function App() {
  const buttonJSS = {
    ":active": {
      animation: "MoveUpDown 0.3s linear",
      animationFillMode: "forwards"
    },

    "@keyframes MoveUpDown": {
      "0%, 100%": {
        transform: "translateY(0)"
      },
      "50%": {
        transform: "translateY(20px)"
      }
    }
  };

  return (
    <div className="App">
      <Button sx={buttonJSS}>MY BUTTON</Button>
    </div>
  );
}

You can view the code on CodeSandbox: https://codesandbox.io/s/clever-frog-rim6xw?file=/src/App.js

css reactjs material-ui css-transitions jss

Answer 1

Answer №1

Since the use of :active and the animation duration is set to 0.3 seconds,
the button's activity time is actually less than 0.3 seconds. This results in incomplete styling.

To resolve this issue, you can implement a toggle using className to create the animation:

function App() {
    const { Button } = MaterialUI;

    const [active, setActive] = React.useState(false);

    const buttonJSS = {
        "&.active": {
            animation: "MoveUpDown 0.3s linear",
            animationFillMode: "forwards"
        },

        "@keyframes MoveUpDown": {
            "0%, 100%": {
                transform: "translateY(0)"
            },
            "50%": {
                transform: "translateY(20px)"
            }
        }
    };

    const handleClick = () => {
        setActive(true);
        setTimeout(() => {
            setActive(false);
        }, 300)
    }

    return (
        <div className="App">
            <Button sx={buttonJSS} className={active ? 'active' : ''} onClick={handleClick}>MY BUTTON</Button>
        </div>
    );
  }

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>
  </head>
  <body>

    <div id="root"></div>

    <script type="text/babel" src="./script.js"></script>
  </body>
</html>

https://codesandbox.io/s/unruffled-varahamihira-z5tf4u?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Since the use of :active and the animation duration is set to 0.3 seconds,
the button's activity time is actually less than 0.3 seconds. This results in incomplete styling.

To resolve this issue, you can implement a toggle using className to create the animation:

function App() {
    const { Button } = MaterialUI;

    const [active, setActive] = React.useState(false);

    const buttonJSS = {
        "&.active": {
            animation: "MoveUpDown 0.3s linear",
            animationFillMode: "forwards"
        },

        "@keyframes MoveUpDown": {
            "0%, 100%": {
                transform: "translateY(0)"
            },
            "50%": {
                transform: "translateY(20px)"
            }
        }
    };

    const handleClick = () => {
        setActive(true);
        setTimeout(() => {
            setActive(false);
        }, 300)
    }

    return (
        <div className="App">
            <Button sx={buttonJSS} className={active ? 'active' : ''} onClick={handleClick}>MY BUTTON</Button>
        </div>
    );
  }

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>
  </head>
  <body>

    <div id="root"></div>

    <script type="text/babel" src="./script.js"></script>
  </body>
</html>

https://codesandbox.io/s/unruffled-varahamihira-z5tf4u?fontsize=14&hidenavigation=1&theme=dark

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

Answer №1

Similar questions

When modifying a string in React, the edit always somehow ends up at the very tail end

Center the form on the page using Bootstrap

Establishing the default scroll position in tables using React.js

revealing a particular field in jQuery during the validation process

Tips on including a trash can symbol to rows in a bootstrap table using React

Identifying the Operating System and Applying the Appropriate Stylesheet

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Sending information from a rails controller to a react component

Transferring an MSAL token to the backend with the help of Axios

Prevent the browser from autofilling password information in a React Material UI textfield when it is in focus

React throwing a typescript error while attempting to update state based on the previous state

disable the button border on native-base

Can someone clarify the actual version of webpack.js being used in my Ruby on Rails application with --webpacker=react configuration?

How to implement SVG in React with the image source as a parameter?

Is there a way to mount or unmount a React component by pressing a single key?

The icon on my page is not displaying, and the responsive menu is also not appearing

Is there a way I can decrease the width of the input field on the left side?

implementing a scroll-up animation using Material UI

Subnav sticks when scrolling down but becomes unresponsive on resizing