CODEWITHSUNDEEP
cssreactjsjss
user2924127
user2924127

Reputation: 6242

React - JSS have element fade in when rendered

I have an element which should render when the page is loaded:

 {this.state.pageLoaded && <MyComponent className={classes.container} /> }

When this component is rendered I would like for it to fade in. So I am trying to apply some jss, but can't get it quite work.

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

I do not know if my syntax is correct as I am confused with how to apply things with special character like @keyframes, --webkit-animation, etc... so that different browsers will work.

When I run the page no animations happen and I get the following warninings in my console:

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

Upvotes: 0

Views: 1525

Answers (3)

FARZAD
FARZAD

Reputation: 85

To achieve this in JSS, you need to declare a key-frames property to your styles object like so;

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

Upvotes: 2

brooksrelyt
brooksrelyt

Reputation: 4025

Since you do not want to use css. You may save some time by adding something like http://react-animations.herokuapp.com/ or https://digital-flowers.github.io/react-animated-css.html to your app.

By following the documentation you can add animations to your react project.

I would go this route if you are unwilling to add css or sass to the project.

Upvotes: 0

Gabryel Ferreira
Gabryel Ferreira

Reputation: 64

You can apply this effect with some css.

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

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

Just add fade-in className to your component and add this code to your css file.

Upvotes: 1

Related Questions