So wenden Sie einen benutzerdefinierten Animationseffekt @keyframes in MaterialUI mit makestyles () an

Ich habe gelernt, Animation in CSS mit @keyframe zu verwenden. Ich möchte jedoch meinen benutzerdefinierten Animationscode in mein Reaktionsprojekt schreiben (Using materialUI). Meine Herausforderung besteht darin, wie ich den Javascript-Code schreiben kann, um meine Animationen mithilfe von makeStyle () in MaterialUI anzupassen. Ich möchte in der Lage sein, die Übergangsprozesse dieses Mal in materialUI in Prozent anzupassen. Ich muss in der Lage sein, solche Codes in makeStyle () zu schreiben, aber ich scheine nicht zu wissen, wie.

@keyframes myEffect {
 0%{
  opacity:0;
  transform: translateY(-200%); 
 }

100% {
  opacity:1;
  transform: translateY(0);
 }
}

Hier ist ein Beispiel, das die keyframesSyntax darin demonstriert makeStyles:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import clsx from "clsx";

const useStyles = makeStyles(theme => ({
  animatedItem: {
    animation: `$myEffect 3000ms ${theme.transitions.easing.easeInOut}`
  },
  animatedItemExiting: {
    animation: `$myEffectExit 3000ms ${theme.transitions.easing.easeInOut}`,
    opacity: 0,
    transform: "translateY(-200%)"
  },
  "@keyframes myEffect": {
    "0%": {
      opacity: 0,
      transform: "translateY(-200%)"
    },
    "100%": {
      opacity: 1,
      transform: "translateY(0)"
    }
  },
  "@keyframes myEffectExit": {
    "0%": {
      opacity: 1,
      transform: "translateY(0)"
    },
    "100%": {
      opacity: 0,
      transform: "translateY(-200%)"
    }
  }
}));

function App() {
  const classes = useStyles();
  const [exit, setExit] = React.useState(false);
  return (
    <>
      <div
        className={clsx(classes.animatedItem, {
          [classes.animatedItemExiting]: exit
        })}
      >
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Button onClick={() => setExit(true)}>Click to exit</Button>
      </div>
      {exit && <Button onClick={() => setExit(false)}>Click to enter</Button>}
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Dokumentation: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation