Material-UI JSS中的闪烁动画

Question

我正在使用Material-UI构建一个GatsbyJS网站。使用withStyles HoC，是否可以制作闪烁的动画？我尝试在提供动画styles：

const styles = theme => ({
        '@keyframes blinker': {
            from: {opacity: 1},
            to: {opacity: 0}
        },
        headerGT: {
            color: 'white',
            animation: ['blinker', '1s', 'linear', 'infinite'],
            '-webkit-animation': ['blinker', '1s', 'linear', 'infinite'],
            '-moz-animation': ['blinker', '1s', 'linear', 'infinite'],
        }
    })

我可以看到在构建DOM时可以识别类和关键帧，并且headerGT具有动画方法，但是动画不会触发。有任何想法吗？

Answer 1

我遇到了同样的问题，但正如JSS 文档中所指定的，使用$前缀引用我的动画解决了它。

尝试这个：

const style = theme => (
{
    '@keyframes blinker': {
        from: { opacity: 1 },
        to: { opacity: 0 },
    },
    headerGT: {
        [...]
        animationName: '$blinker',
        animationDuration: '1s',
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite',
    },
});

Answer 2

是的，这是很有可能的。例如：

const style = theme => (
{
    '@keyframes blinker': {
        from: {opacity: 1},
        to: {opacity: 0}
    },
    headerGT: {
            position: 'absolute',
            width: '60px',
            height: '60px',
            right: 17,
            backgroundImage: 'url(https://cdn3.iconfinder.com/data/icons/common-4/24/ui-21-512.png)',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'contain',
            border: 'none',
            bottom: '108px',
            opacity: '0.4',
            backgroundColor: 'red',
            animationName: 'blinker',
            animationDuration: '1s',
            animationTimingFunction: 'linear',
            animationIterationCount:'infinite',
    },
});

Answer 3

在MUI v5中，您可以使用情感来定义动画keyframes。

import { styled } from '@mui/material/styles';
import { keyframes } from '@mui/system';

const blink = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const BlinkedBox = styled('div')({
  backgroundColor: 'pink',
  width: 30,
  height: 30,
  animation: `${blink} 1s linear infinite`,
});

现场演示