Мигание анимации в Material-UI JSS - PullRequest
Новая
       28

Мигание анимации в Material-UI JSS

0 голосов
/ 29 сентября 2018

Я создаю сайт GatsbyJS с помощью Material-UI.Используя 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'],
        }
    })

. Я вижу, что класс и ключевые кадры распознаются, а headerGT имеет метод анимации при сборке DOM, но анимация не запускается.Есть идеи?

1 Ответ

0 голосов
/ 10 мая 2019

Да, это вполне возможно.Например: 

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',
    },
});
...