Реагируйте - у JSS есть элемент, появляющийся при рендеринге - PullRequest
Новая
       8

Реагируйте - у JSS есть элемент, появляющийся при рендеринге

0 голосов
/ 19 июня 2019

У меня есть элемент, который должен отображаться при загрузке страницы: 

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

Я не знаю, правильный ли мой синтаксис, потому что я не совсем понимаю, как применять специальные символы, такие как @ключевые кадры, --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

Ответы [ 2 ]

2 голосов
/ 19 июня 2019

Вы можете применить этот эффект с некоторыми CSS. 

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

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

Просто добавьте постепенное добавление className к вашему компоненту и добавьте этот код в ваш CSS-файл.

0 голосов
/ 19 июня 2019

Так как вы не хотите использовать CSS. Вы можете сэкономить время, добавив что-то вроде http://react -animations.herokuapp.com / или https://digital -flowers.github.io / Reaction-animated-css.html в ваше приложение.

Следуя документации, вы можете добавить анимацию к вашему реактивному проекту.

Я бы пошел по этому пути, если вы не хотите добавлять css или sass в проект.

...