MUI 5 - 關鍵幀 animation 使用樣式 API 不工作

Question

我正在嘗試使用 MUI 5 中styled懸停時為按鈕設置動畫 - 但它不起作用。 我試圖從中尋找靈感：

• 如何使用 makestyles() 在 MaterialUI 中應用自定義 animation 效果 @keyframes
• https://github.com/mui-org/material-ui/issues/24851

.. 沒有運氣。

試着看看並說出我看不到的東西：

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

Answer 1

Emotion 的keyframe是標簽 function 。 它接受模板字符串作為第一個參數並返回關鍵幀數據。 您在代碼中定義的是一個 function，它只返回另一個 function 而不執行任何操作：

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"
}));

現場演示