当前位置: 首页 > 面试题库 >

如何使用makestyles()在MaterialUI中应用自定义动画效果@keyframes

何骞尧
2023-03-14
问题内容

我学会了使用@keyframe在CSS中使用动画。但是我想将我的自定义动画代码编写到我的React项目中(使用materialUI)。我的挑战是如何在MaterialUI中使用makeStyle()编写JavaScript代码以自定义动画。我希望这次可以在materialUI中按百分比自定义过渡过程。我需要能够在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-
animation



 类似资料:
  • 我已经在带有TableCellRenderer的JTable中添加了一个带有JLabel的图片。但是,当鼠标移动到单元格上时,如何在特定的列和行上为JLabel添加边框呢? 这是第一个呈现器类: 这是第二个呈现器类: 这就是我在JTable中设置鼠标输入和鼠标单击的方式: 但当鼠标移动到第6列的一个单元格时,这会为该列中的所有单元格添加一个边框。当鼠标进入特定的行和列时,如何将它只变成特定的行和列

  • 本文向大家介绍Android自定义PopWindow带动画向下弹出效果,包括了Android自定义PopWindow带动画向下弹出效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了PopWindow实现带动画向下弹出效果的具体代码,供大家参考,具体内容如下 首先建一个popwin的实体类 然后是这个类的布局 view_popwin.xml 接下来是这个类里涉及的动画 popwin_

  • 本文向大家介绍Android 自定义view实现水波纹动画效果,包括了Android 自定义view实现水波纹动画效果的使用技巧和注意事项,需要的朋友参考一下 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她; 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢;

  • 关于效果 Illustrator 包含各种效果,可以对某个对象、组或图层应用这些效果,以更改其特征。 向对象应用一个效果后,该效果会显示在“外观”面板中。从“外观”面板中,可以编辑、移动、复制、删除该效果或将它存储为图形样式的一部分。当使用一种效果时,必须先扩展对象,然后才能访问新点。 “效果”菜单上半部分的效果是矢量效果。在“外观”面板中,只能将这些效果应用于矢量对象,或者某个位图对象的填色或描

  • 本文向大家介绍jQuery中使用animate自定义动画的方法,包括了jQuery中使用animate自定义动画的方法的使用技巧和注意事项,需要的朋友参考一下 动画 animate()   01.animate()方法的简单使用   有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了。   操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别。   

  • 本文向大家介绍详解Vue中过度动画效果应用,包括了详解Vue中过度动画效果应用的使用技巧和注意事项,需要的朋友参考一下 一、实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1、利用CSS样式实现过渡效果 1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。 2.v-enter-active: 定义进入过渡的结束状态