[英]How to apply custom animation effect @keyframes in MaterialUI using makestyles()
I have learnt to use animation in css using @keyframe.我已经学会使用@keyframe 在 css 中使用 animation。 I however want to write my custom animation code to my react project(Using materialUI).
但是,我想将我的自定义 animation 代码写入我的反应项目(使用 materialUI)。 My challenge is how I can write the javascript code to custom my animations using the makeStyle() in MaterialUI.
我的挑战是如何编写 javascript 代码来使用 MaterialUI 中的 makeStyle() 自定义我的动画。 I want to be able to custom the transitions processes in percentages this time around in materialUI.
这次我希望能够在 materialUI 中以百分比自定义转换过程。 I need to be able to write codes like this in makeStyle() but I don't seem to know how to.
我需要能够在 makeStyle() 中编写这样的代码,但我似乎不知道该怎么做。
@keyframes myEffect { 0%{ opacity:0; transform: translateY(-200%); } 100% { opacity:1; transform: translateY(0); } }
Here is an example demonstrating the keyframes
syntax within makeStyles
:这是一个演示
makeStyles
中的keyframes
语法的示例:
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);
Documentation: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation文档: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation
For those who have started using Material-UI v5 and want to know how to do this using Emotion rather than makeStyles
, below is an example of one way to do the equivalent styles using Emotion.对于那些已经开始使用 Material-UI v5 并想知道如何使用 Emotion 而不是
makeStyles
的人,下面是使用 Emotion 执行等效 styles 的一种方法示例。
/** @jsxImportSource @emotion/react */
import React from "react";
import ReactDOM from "react-dom";
import { css, keyframes } from "@emotion/react";
import { useTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/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 keyframes documentation: https://emotion.sh/docs/keyframes情感关键帧文档: https://emotion.sh/docs/keyframes
Just some notes on top of @Ryan's answer.只是在@Ryan 的回答之上的一些注释。 If you define the
keyframe
using makeStyles
.如果您使用
makeStyles
定义keyframe
。 Remember to prefix the animation name with $
.请记住在 animation 名称前加上
$
。 I missed this small detail the first time and my code didn't work, in the example below我第一次错过了这个小细节,我的代码不起作用,在下面的例子中
const useStyles = makeStyles({
"@keyframes fadeIn": {
"0%": {
opacity: 0,
transform: "translateY(5rem)"
},
"100%": {
opacity: 1,
transform: "translateY(0)"
}
},
selector: {
animation: "$fadeIn .2s ease-in-out"
}
});
Instead of代替
animation: "fadeIn .2s ease-in-out"
It should be它应该是
animation: "$fadeIn .2s ease-in-out"
But if you define the keyframe
in global scope.但是如果你在全局 scope 中定义
keyframe
。 The prefix is unnecessary here这里不需要前缀
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
}
});
Follow this issue on github for more discussion about this.请关注 github 上的此问题,以获取有关此问题的更多讨论。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.