css 使用SX属性创建动画- MUI v5

f4t66c6m 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(187)

我尝试创建一个旋转svg的动画作为加载器，检查在线我已经看到了一些例子，这样做的样式组件，这是不赞成的。
我想知道你们有什么建议吗？我试着在我的SX中添加一个“@keyframes spin”属性，但它没有任何作用，例如：

<Box
 sx={{ 
 animation: '$test 1s linear infinite',
 '@keyframes spin': {
   from: {
    transform: 'rotate(0dg)'
  },
   to: {
    transform: 'rotate(360dg)'
  }
 }
}}
>

我尝试用MUI v5的SX属性创建一个与样式化组件逻辑相同的动画，但失败了：（
我想知道我们是否可以不使用CSS文件和类来实现它...

css

来源：https://stackoverflow.com/questions/74920442/creating-an-animation-with-sx-property-mui-v5

1条答案

按热度按时间

koaltpgm1#

使用MUI5，在SX prop 上添加关键帧时效果很好。下面是我的示例

<Box sx={{
                "@keyframes width-increase": {
                    "0%": {
                        width: "100px"
                    },
                    "100%": {
                        width: "300px"
                    }
                },
                width: "100px",
                height: "50px",
                backgroundColor: "red",
                animation: "width-increase 1s ease infinite",
            }}></Box>

确保在使用前初始化关键帧。
希望这对你有帮助...

赞(0）回复(0）举报 2022-12-27

我来回答

css 使用SX属性创建动画- MUI v5

1条答案

相关问题

热门标签

最新问答