css - React-JSS在渲染时使元素淡入

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

 {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

最佳答案

您可以在某些CSS中应用此效果。

.fade-in {
  animation: fade-in 2s;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

只需将淡入的className添加到您的组件中，然后将此代码添加到您的css文件中即可。

关于css - React-JSS在渲染时使元素淡入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56674112/