How to animate image for 5 seconds in React using CSS?

Question

I'm using React with Redux, and I have the following situation. In my component I have a div that holds and image, and the component is also receiving a property from my Redux state which is called showIcon. So, if showIcon is not null, I want the image to be displayed for 5 seconds, and once the 5 seconds passes, I want it to disappear and set the showIcon value to null by dispatching an action that I have like updateShowIcon(null);. How can I do this properly in React, and how can I use CSS to show and animate the icon as I want?

import React, { Component } from 'react';

class MyComp extends Component {
    render() {
        return (
            <div style={styles.mainDiv}>
                 <div style={styles.childDiv}>
                            {
                                this.props.showIcon &&
                                <div style={styles.iconStlyes}>
                                    <img src={process.env.PUBLIC_URL + '/icons/myicon.png'}/>
                                </div>
                            }
                            // partially removed for brevity, some other component
                </div>
            </div>
        );
    }
}

const styles = {
    iconStlyes: {
        position: 'absolute',
        zIndex: 10,
    },
    mainDiv: {
        overflow: 'auto',
        margin: 'auto',
        height: 'calc(100vh - 64px)',
        padding: 0,
    },
    childDiv: {
        height: 'calc(100vh - 64px)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
};

export default MyComp;

Matan Bobi · Accepted Answer · 2018-04-08 14:34:50Z

Whenever I detect a change in componentWillReceiveProps I would create a timer and dispatch the action. Remember to clear the timeout on componentWillUnmount.
The idea is based on you showing and hiding the icon with css and not with react conditional rendering, so once you need to show the icon you add the class show or remove it once you don't need to show it.
It would probably look like this:

componentWillReceiveProps(nextProps){
  if (nextProps.showIcon && nextProps.showIcon !== this.props.showIcon){
    this.timer = setTimeout(() => {nextProps.updateShowIcon(null)}, 5000);
  }
}

componentWillUnmount(){
  clearTimeout(this.timer);
}

render() {
  const {showIcon} = this.props;
    return (
        <div style={styles.mainDiv}>
             <div style={styles.childDiv}>      
               <div style={styles.iconStlyes} className={`${showIcon ? 'show':''} icon-container`}>
                 <img src={process.env.PUBLIC_URL + '/icons/myicon.png'}/>
               </div>   
            </div>
        </div>
    );
}

and your css for a simple fade animation:

.icon-container{
  opacity: 0;
  transition: opacity: 500ms ease-in;
}

.icon-container.show{
  opacity: 1;
}

Matan Bobi · Accepted Answer · 2018-04-08 14:23:40Z

0

If it is important for you to use the store state then you can manage the showIcon property via componentWillReceiveProps(nextProps) and do something like:

componentWillReceiveProps(nextProps){
  if(!this.props.showIcon && nextProps.showIcon){
      setTimeout(()=>dispatch(updateShowIcon(null)),5*1000);
  }
  //manage clear timeout if necessary 
}

But for the animation part its better to use the showIcon property as a class and not for adding/removing it from the DOM, like:

<div style={styles.iconStlyes} className={this.props.showIcon?'show':'hide'}>
    <img src={process.env.PUBLIC_URL + '/icons/myicon.png'}/>
</div>

and the styles should manage it:

iconStyles: {
    position: 'absolute',
    zIndex: 10;
    transition: //effects of specified or all attributes
    &.show{
       visibility: visible;//display:block
     }
    &.hide{
       visibility: hidden;//display:none
     }
}

edited Apr 8, 2018 at 14:23

Matan Bobi

2,8111 gold badge18 silver badges28 bronze badges

answered Apr 8, 2018 at 13:58

Nirit Levi

2611 silver badge7 bronze badges

2 Comments

Matan Bobi Over a year ago

You should save the timeout inside this.timer so you will be able to clear it in componentWillUnmount

Nirit Levi Over a year ago

I added it with comments. its just weird to me to hold a global state for the showing and hiding of an icon. I imagined it more like a 'current user state' rather then 'all users' ,but I guess anything possible.

Collectives™ on Stack Overflow

How to animate image for 5 seconds in React using CSS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related