reactjs MUI 5 -使用样式化API的关键帧动画不工作

iezvtpos 于 2023-02-08 发布在 React

关注(0)|答案(2)|浏览(112)

我尝试使用MUI 5中的styled来制作悬停按钮的动画效果-但它不起作用。我尝试从以下内容中寻找灵感：

...没有运气。
试着看一看，告诉我 * 我 * 看不到的东西：

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";
import { keyframes } from "@emotion/react";

const getAnimation = () => keyframes`
    0 %  { transform: translate(1px, 1px)   rotate(0deg)    },
    10%  { transform: translate(-1px, -2px) rotate(-1deg);  },
    20%  { transform: translate(-3px, 0px)  rotate(1deg);   },
    30%  { transform: translate(3px, 2px)   rotate(0deg);   },
    40%  { transform: translate(1px, -1px)  rotate(1deg);   },
    50%  { transform: translate(-1px, 2px)  rotate(-1deg);  },
    60%  { transform: translate(-3px, 1px)  rotate(0deg);   },
    70%  { transform: translate(3px, 1px)   rotate(-1deg);  },
    80%  { transform: translate(-1px, -1px) rotate(1deg);   },
    90%  { transform: translate(1px, 2px)   rotate(0deg);   },
    100% { transform: translate(1px, -2px)  rotate(-1deg);  }
`;

const StyledButton = styled((props) => {
  const { ...other } = props;
  return <Button {...other} />;
})(({ theme }) => ({
  ":hover": {
    animation: `${getAnimation} shake infinite`
  },
  backgroundColor: "#2699FB",
  color: "#FFFFFF"
}));

const App = () => {
  return (
    <StyledButton variant="contained">
              My button
    </StyledButton>
  )
}

export default App

reactjs

来源：https://stackoverflow.com/questions/69372985/mui-5-keyframe-animation-using-styled-api-not-working

2条答案

按热度按时间

krcsximq1#

Emotion的keyframe是一个标签函数，它接受一个模板字符串作为第一个参数，并返回关键帧数据，你在代码中定义的是一个函数，它只返回另一个函数，而不做任何事情：

const getAnimation = () => keyframes`
    0 %  { transform: translate(1px, 1px)   rotate(0deg)    },
    ...
    100% { transform: translate(1px, -2px)  rotate(-1deg);  }
`;

你应该把密码改成这样：

const myKeyframe = keyframes`
    0 %  { transform: translate(1px, 1px)   rotate(0deg)    },
    ...
    100% { transform: translate(1px, -2px)  rotate(-1deg);  }
`;

用法

const StyledButton = styled((props) => <Button {...props} />)(({ theme }) => ({
  ":hover": {
    backgroundColor: "#2699FB",
    // I also fixed the animation sub-property order of yours
    // See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#configuring_the_animation
    animation: `${myKeyframe} 1s infinite ease`
  },
  backgroundColor: "#2699FB",
  color: "#FFFFFF"
}));

现场演示

赞(0）回复(0）举报 2023-02-08

kulphzqa2#

这似乎对我有用

sx支柱内部

<Box
  sx={{
    animationName: "move",  
    "@keyframes move": {
       "0%": {
         opacity: 0,
       },
       "50%": {
         opacity: 1,
       },
       "100%": {
         opacity: 0,
        },
    },          
  }}
>
 Content
</Box>

或
（二）

import { keyframes } from "@mui/system";

...

const shake = keyframes`
  25% { transform: translateX(-1px); }    
  75% { transform: translateX(1px); }
`;

...

<Box
  sx={{
    animation: `${shake} .5s linear infinite;`,
    width: "75px",
    height: "75px",
  }}
>
...
</Box>

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs MUI 5 -使用样式化API的关键帧动画不工作

2条答案

用法

现场演示

相关问题

热门标签

最新问答