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

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

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

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

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

Answer 2

因为您不想使用CSS。您可以通过在应用中添加http://react-animations.herokuapp.com/或https://digital-flowers.github.io/react-animated-css.html之类的内容来节省时间。

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

如果您不愿意在项目中添加css或sass，我会走这条路。

Answer 3

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

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

3 个答案: