animation - 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 docs 中指定的那样，用 $ 前缀引用我的动画解决了它。
尝试这个:

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