MUI에서 커스텀 애니메이션 효과 @keyframes를 적용하는 방법

MUI에서 커스텀 애니메이션 효과 @keyframes를 적용하는 방법

CSS에서 애니메이션을 사용하는 방법을 배웠습니다.@keyframe단, 리액트 프로젝트(MUI 사용)에 커스텀 애니메이션 코드를 쓰고 싶습니다.내 과제는 어떻게 자바스크립트 코드를 작성하여 애니메이션을 커스터마이즈할 수 있는가이다.makeStyle()MUI에서.

이번에는 MUI로 이행 프로세스를 퍼센티지로 커스터마이즈 할 수 있도록 하고 싶다.이런 코드를 쓸 수 있어야 합니다.makeStyle()어떻게 해야 할지 모르겠어요.

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

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

다음 예시는 다음과 같습니다.keyframes내부 구문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);

문서: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-displays

---

Material-UI v5를 사용하기 시작하고 Emotion을 사용하는 방법을 알고 싶은 분들을 위해makeStyles다음은 Emotion을 사용하여 동일한 스타일을 수행하는 한 가지 방법의 예입니다.

/** @jsxImportSource @emotion/react */
import React from "react";
import ReactDOM from "react-dom";

import { css, keyframes } from "@emotion/react";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";

const myEffect = keyframes`
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;
const myEffectExit = keyframes`
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-200%);
  }
`;

function App() {
  const theme = useTheme();
  const animatedItem = css`
    animation: ${myEffect} 3000ms ${theme.transitions.easing.easeInOut};
  `;
  const animatedItemExiting = css`
    animation: ${myEffectExit} 3000ms ${theme.transitions.easing.easeInOut};
    opacity: 0;
    transform: translateY(-200%);
  `;
  const [exit, setExit] = React.useState(false);
  return (
    <>
      <div css={exit ? animatedItemExiting : animatedItem}>
        <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);

Emotion 키 프레임 매뉴얼:https://emotion.sh/docs/keyframes

V5

v5 에서는,keyframes키 프레임의 스타일시트를 생성하기 위한 함수(기본값으로 감정에서 다시 추출됨):

import { styled } from '@mui/material/styles';
import { keyframes } from '@mui/system';

const spin = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const RotatedBox = styled("div")({
  backgroundColor: "pink",
  width: 30,
  height: 30,
  animation: `${spin} 1s infinite ease`
});

왜냐하면 둘 다styled/sxprop use emotion internal, 같은 스타일의 오브젝트를 전달 할 수 있습니다.sx소품:

<Box
  sx={{
    backgroundColor: "pink",
    width: 30,
    height: 30,
    animation: `${spin} 1s infinite ease`
  }}
/>

V4

@Ryan의 대답 위에 몇 가지 메모만 남겨주세요.를 정의하면keyframe사용.makeStyles. 애니메이션 이름 앞에 다음을 붙이는 것을 잊지 마십시오.$처음에 이 작은 디테일을 놓쳐서 코드가 작동하지 않았습니다.다음 예시는요.

const useStyles = makeStyles({
  "@keyframes fadeIn": {
    "0%": {
      opacity: 0,
      transform: "translateY(5rem)"
    },
    "100%": {
      opacity: 1,
      transform: "translateY(0)"
    }
  },
  selector: {
    animation: "$fadeIn .2s ease-in-out"
  }
});

대신

animation: "fadeIn .2s ease-in-out"

그럴 것 같네요.

animation: "$fadeIn .2s ease-in-out"

단, 예를 들어맞는다면keyframe글로벌 범위 내에서.여기서 접두사는 불필요합니다.

const useStyles = makeStyles({
  "@global": {
    "@keyframes fadeIn": {
      "0%": {
        opacity: 0,
        transform: "translateY(5rem)"
      },
      "100%": {
        opacity: 1,
        transform: "translateY(0)"
      }
    }
  },
  selector: {
    animation: "fadeIn .2s ease-in-out" // --> this works
  }
});

이에 대한 자세한 내용은 github의 이 호를 참조하십시오.

언급URL : https://stackoverflow.com/questions/58948890/how-to-apply-custom-animation-effect-keyframes-in-mui