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

我不知道我的语法是否正确，因为我对如何应用带有特殊字符的东西感到困惑，比如@keyframe、--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

您可以使用一些css来应用此效果。

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

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

只需将淡入 className添加到组件中，并将此代码添加到css文件中。

Answer 2

要在JSS中实现这一点，您需要向您的样式对象声明一个关键帧属性，如下所示；

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

Answer 3

因为您不想使用css。你可以通过在你的应用中添加像http://react-animations.herokuapp.com/或https://digital-flowers.github.io/react-animated-css.html这样的东西来节省一些时间。

通过遵循文档，您可以将动画添加到react项目中。

我会走这条路线，如果你不愿意添加css或sass的项目。