React - JSS 渲染时元素淡入答案

【问题标题】：React - JSS have element fade in when renderedReact - JSS 渲染时元素淡入
【发布时间】：2019-11-02 13:46:19
【问题描述】：

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

 {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 reactjs jss

【解决方案1】：

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

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

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

只需将 fade-in className 添加到您的组件，然后将此代码添加到您的 css 文件中。

【讨论】：

感谢您的回答。虽然我希望将所有样式保留在 .js 文件中，而不是使用 css 文件。

【解决方案2】：

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

按照文档，您可以将动画添加到您的 React 项目中。

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

【讨论】：

【解决方案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)',
    },
});

【讨论】：