关键词：
【中文标题】如何在 MUI 中应用自定义动画效果@keyframes？【英文标题】：How to apply custom animation effect @keyframes in MUI? 【发布时间】：2020-03-15 20:22:27 【问题描述】：我学会了使用@keyframe 在 CSS 中使用动画。但是，我想将自定义动画代码写入我的 React 项目（使用 MUI）。我的挑战是如何编写 Javascript 代码来使用 MUI 中的 makeStyle() 自定义我的动画。
我希望能够以百分比自定义转换过程
这次是在 MUI。我需要能够在makeStyle() 中编写这样的代码，但我似乎不知道该怎么做。
@keyframes myEffect
0%
opacity:0;
transform: translateY(-200%);
100%
opacity:1;
transform: translateY(0);
【问题讨论】：
【参考方案1】：这是一个示例，演示 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);
文档：https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation
对于那些已经开始使用 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);
情感关键帧文档：https://emotion.sh/docs/keyframes
【讨论】：
【参考方案2】：V5
在 v5 中，您可以使用 keyframes 函数（默认是 emotion 中的 re-exported）来生成关键帧的样式表：
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/sx 属性在内部都使用了情感，所以可以将相同的样式对象传递给sx 属性：
<Box
sx=
backgroundColor: "pink",
width: 30,
height: 30,
animation: `$spin 1s infinite ease`
/>
V4
只是在@Ryan's answer 之上的一些注释。如果您使用makeStyles 定义keyframe。请记住在动画名称前加上$。我第一次错过了这个小细节，我的代码不起作用，在下面的示例中
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 上关注 issue 以获取更多关于此的讨论。
【讨论】：
如何修改自定义 ButtonStyle 动画
】如何修改自定义ButtonStyle动画【英文标题】：HowtomodifycustomButtonStyleanimations【发布时间】：2020-08-2318:32:35【问题描述】：您可以使用SwiftUI修改Buttons的高亮/按下状态，方法是实现自己的ButtonStyle，它会根据isPressed状态修改label。... 查看详情
如何在 Swift 4 中同步执行多个自定义动画函数
】如何在Swift4中同步执行多个自定义动画函数【英文标题】：HowtoexecutemultiplecustomanimationfunctionssynchronouslyinSwift4【发布时间】：2018-05-2112:07:41【问题描述】：我正在开发一个IOS应用程序，该应用程序旨在帮助旅游区的人们了解交... 查看详情
自定义图钉动画 - MKMapView
...MKMapView【发布时间】：2010-04-1619:01:38【问题描述】：我在应用程序中使用了pin图像而不是标准pin，现在我想为自定义pin提供动画（与标准pin一样的掉落效果）。如何为自定义pin图像提供下降动画效果？？？【问题讨论】：Thisshoul... 查看详情
如何创建自定义插值器以在 android 中应用翻译动画
】如何创建自定义插值器以在android中应用翻译动画【英文标题】：HowtocreatecustomInterpolatortoapplytranslateanimationinandroid【发布时间】：2014-01-2707:37:38【问题描述】：我想创建一个自定义插值来应用平移动画，动画应该通过以下函数... 查看详情
如何在canvas中实现自定义路径动画(代码片段)
...塞尔曲线，因此，这个动画也许是下面这个样子的：那么如何才能在canvas中实现这种动画效果呢？其实很简单，对于路径的处理svg非常在行，因此在canvas中实现自定义路径动画，我们需要借助svg的力量。创建Path制作动画前，先... 查看详情
如何在核心动画中为 onOrderOut 使用自定义动画？
】如何在核心动画中为onOrderOut使用自定义动画？【英文标题】：HowcanIusecustomanimationsforonOrderOutinCoreAnimation?【发布时间】：2008-10-2813:23:09【问题描述】：CoreAnimation允许通过在基于CALayer的类中实现actionForKey方法来自定义动画：-(id&... 查看详情
如何在 Android 应用中自定义顶部状态栏？
】如何在Android应用中自定义顶部状态栏？【英文标题】：HowtocustomizethetopstatusbarinanAndroidapp?【发布时间】：2011-01-3011:43:42【问题描述】：具体来说，我想更改文本和背景颜色。是否也可以更改“动画进度轮”的颜色？我可以使用... 查看详情
万彩动画大师|镜头自定义加速度
给镜头添加自定义加速度的效果，告别单一的镜头变化效果，也让移动效果体验更佳。1. 镜头自定义加速度界面在【时间轴区域】中单击镜头，在右边的属性栏中可以看到【镜头】，【镜头】下面的【变化曲线】可以自定义... 查看详情
如何创建自定义 UIView 动画
】如何创建自定义UIView动画【英文标题】：HowtocreatecustomUIViewAnimation【发布时间】：2013-03-2523:37:30【问题描述】：创建自定义UIView动画过渡的最简单方法是什么？在Google搜索中弹出的大多数教程都不是最新的。（我使用的是XCode4.... 查看详情
如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange
】如何使用自定义钩子在MUIv5中处理AutoCompleteonChange【英文标题】：HowtohandleAutoCompleteonChangeinMUIv5usingacustomhook如何使用自定义钩子在MUIv5中处理AutoCompleteonChange【发布时间】：2022-01-1020:13:59【问题描述】：我正在使用一个自定义挂... 查看详情
如何在android中为首选项添加涟漪效果？
】如何在android中为首选项添加涟漪效果？【英文标题】：Howtoaddrippleeffecttopreferencesinandroid?【发布时间】：2015-11-1409:51:36【问题描述】：我正在努力在触摸（选中）首选项时添加涟漪效果。我通过扩展ListPreference自定义了我的偏... 查看详情
focusky教程|自定义动画运动路径
在Focusky（也称为“FS软件”）中，除了可以应用软件里自带的动画效果，如进入特效，强调特效，退出特效，还可以自定义一个对象由一个点按照一定的轨迹运动到另一点。 操作步骤如下： 1点击“动画”进入动画编辑... 查看详情
在 UINavigationController 中定义自定义过渡动画器时锚定键盘，如 iMessage 应用程序
...ionController中定义自定义过渡动画器时锚定键盘，如iMessage应用程序【英文标题】：AnchorkeyboardlikeiMessageappwhendefinecustomtransitionanimatorinUINavigationController【发布时间】：2018-11-1723:49:25【问题描述】：我在导航控制器中创建了一个自定... 查看详情
android应用中如何自定义弹框？(代码片段)
在我们应用开发过程中，系统自带的弹框效果不是很好看，所以我们就得自己去自定义，下面就来简单说说吧1.效果2.自定义弹框布局(alert_dialog_defaut.xml)<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"... 查看详情
android应用中如何自定义弹框？(代码片段)
在我们应用开发过程中，系统自带的弹框效果不是很好看，所以我们就得自己去自定义，下面就来简单说说吧1.效果2.自定义弹框布局(alert_dialog_defaut.xml)<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"... 查看详情
android自定义view视差动画(代码片段)
...成的效果:在上一篇:androidsetContentView()解析中我们介绍了,如何通过Factory2来自己解析View,那么我们就通过这个机制,来完成今天的效果《视差动画》,回顾先 查看详情
如何构建自定义 jQuery 缓动/弹跳动画？
】如何构建自定义jQuery缓动/弹跳动画？【英文标题】：HowToBuildCustomjQueryEasing/BounceAnimations?【发布时间】：2013-01-0522:49:32【问题描述】：我熟悉jQueryanimate功能，也经历过各种jQueryUIeasingfunctions。不幸的是，它们都不是我正在寻找... 查看详情
如何在颤动中显示带有动画的自定义对话框？
】如何在颤动中显示带有动画的自定义对话框？【英文标题】：howtoshowaCustomDialogBoxwithanimationinflutter?【发布时间】：2021-11-0608:42:23【问题描述】：我想在颤动中按下按钮时显示这样的自定义对话框，是否有任何包或小部件可以存... 查看详情