Cách áp dụng hiệu ứng hoạt hình tùy chỉnh @keyframes trong MaterialUI bằng cách sử dụng makeststyle ()

Tôi đã học cách sử dụng hình ảnh động trong css bằng cách sử dụng @keyframe. Tuy nhiên tôi muốn viết mã hoạt hình tùy chỉnh cho dự án phản ứng của mình (Sử dụng vật liệu). Thử thách của tôi là làm thế nào tôi có thể viết mã javascript để tùy chỉnh hoạt hình của mình bằng cách sử dụng makeStyle () trong MaterialUI. Tôi muốn có thể tùy chỉnh các quá trình chuyển đổi theo tỷ lệ phần trăm trong khoảng thời gian này trong vật liệuUI. Tôi cần có khả năng viết mã như thế này trong makeStyle () nhưng dường như tôi không biết làm thế nào.

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

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

Mở rộng đoạn trích

— mykoman
nguồn

Dưới đây là một ví dụ minh họa keyframescú pháp trong 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);

Tài liệu: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation

— Ryan Cogswell
nguồn