0%
June 9, 2023

Mui CSS Animation with Keyframes

react

In traditional mui:

const useStyles = makeStyles((theme) => ({
  grow: {
    animation: `$growAnimation 2000ms ease-in-out`,
  },
  "@keyframes growAnimation": {
    "0%": {
      boxShadow: "0 0 0px #3498db",
    },
    "50%": {
      boxShadow: "0 0 20px #3498db",
    },
    "100%": {
      boxShadow: "0 0 0px #3498db",
    },
  },
}));

In latest tss:

import React, { ReactNode, useEffect, useState } from "react";
import classnames from "classnames";
import { tss } from "tss-react/mui";
import { keyframes } from "tss-react";

const useStyles = tss.create(() => ((
    {
        customFadein: {
            "&.fade-in": {
                height: "100%",
                animation: `${keyframes`
                0% {
                    opacity: 0;
                },
                100% {
                    opacity: 1;
                }
                `} 0.3s ease-in-out`
            }
        }
    })
));

After animation is triggered, make sure to toggle off the corresponding flag

const shouldGrow = growing && rowIndexBeingSelected === reduxStoreRowIndex;

useEffect(() => {
  if (shouldGrow) {
    setTimeout(() => {
      dispatch(wbuserSlice.actions.setRowEdition({ grow: false }));
    }, 2000);
  }
}, [growing]);