css - React - JSS 在呈现时让元素淡入

Question

我有一个应该在页面加载时呈现的元素:

 {this.state.pageLoaded && <MyComponent className={classes.container} /> }

渲染此组件时，我希望它淡入。所以我尝试应用一些 jss，但无法正常工作。

这是我的 JSS:

const styles = theme => ({
    '@keyframes fadein': {
        from: { opacity: 0 },
        to :  { opacity: 1 }
    }, 
    /* Firefox < 16 */
    '@-moz-keyframes fadein': {
        from: { opacity: 0 },
        to :  { opacity: 1 }
    },
    /* Safari, Chrome and Opera > 12.1 */
    '@-webkit-keyframes fadein': {
        from: { opacity: 0 },
        to :  { opacity: 1 }
    },
    /* Internet Explorer */
    '@-ms-keyframes fadein': {
        from: { opacity: 0 },
        to :  { opacity: 1 }
    },
    /* Opera < 12.1 */
    '@-o-keyframes fadein': {
        from: { opacity: 0 },
        to :  { opacity: 1 }
    },
    container: {
        //How do I insert like -webkit-animation in here????
       animation: '$fadein',
    },
});

我不知道我的语法是否正确，因为我对如何应用具有特殊字符(如@keyframes、--webkit-animation 等)的东西感到困惑...以便不同的浏览器可以工作。

当我运行该页面时，没有动画发生，我在控制台中收到以下警告:

Warning: [JSS] Unknown rule @-moz-keyframes fadein
Warning: [JSS] Unknown rule @-webkit-keyframes fadein
Warning: [JSS] Unknown rule @-ms-keyframes fadein
Warning: [JSS] Unknown rule @-o-keyframes fadein

Answer 1

要在 JSS 中实现这一点，您需要像这样为您的 styles 对象声明一个 key-frames 属性；

export default ({
    '@keyframes ring': {
        from: {
            transform: 'rotate(0deg)',
        },
        to: {
            transform: 'rotate(360deg)',
        },
    },
    someClassName: {
        animationDelay: '-0.2s',
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        animationName: '$ring',                 <-- HERE IS HOW YOU REFERENCE TO IT
        animationTimingFunction: 'cubic-bezier(0.5, 0, 0.5, 1)',
    },
});